Sass a Gulp základ použití

4.5.2016 MaMusha Comments 3 comments

V současné době je moderní použití CSS preprocesorů. Vyzkouším si základní použití na jednoduchém webu. Předpokladem je instalace Node.js. Ověříme si instalaci vypsáním verze.

node -v

node -v

Protože chci být hodně moderní budu používat nástroj pro automatizaci úloh Gulp.

npm install -g gulp

1	npm install -g gulp

To nám nainstaluje gulp globálně. Dále si vytvoříme strukturu projektu, pro jednoduchý projekt něco takového

- index.html
-- css
-- sass
   - style.scss

- index.html

-- css

-- sass

- style.scss

dále provedeme instalaci gulp pluginu pro sass

npm install --save-dev gulp
npm install --save-dev gulp-sass

1 2	npm install --save-dev gulp npm install --save-dev gulp-sass

přidají je se nám závislosti do package.json

a teď už jdeme na samotný Gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('./css/'));
});

//Watch task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);

});

var gulp = require('gulp');

var sass = require('gulp-sass');

gulp.task('styles', function() {

gulp.src('sass/**/*.scss')

.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))

.pipe(gulp.dest('./css/'));

});

//Watch task

gulp.task('default',function() {

gulp.watch('sass/**/*.scss',['styles']);

});

no a nyní stačí v projektu c consoli pustit gulp a po editaci style.scss se adresáři css objeví style.css vygenerovaný automaticky ze sassového style.scss. Můžeme naplno využít výhody Sassu a k tomu ještě Gulp poskytuje spoustu dalších užitečných pluginů a vrátím se k nim možná příště.

3 thoughts on “Sass a Gulp základ použití”

Co hledám

co neumím, to se naučím

Sass a Gulp základ použití

4.5.2016 MaMusha Comments 3 comments

3 thoughts on “Sass a Gulp základ použití”

Napsat komentář: Jirka Zrušit odpověď na komentář