Pokračujeme v použití Gulp, dnes BrowserSync, gulp-notify a gulp-autoprefixer
Pokračuji si s hraním spoužitím Gulpu , začala jsem v minulém příspěvku. Dnes si naistaluji browserSync automatické obnovení okna prohlížeče při změně souborů, gulp-notify informační zprávy v OS a gulp- autoprefixer. Nejprve si balíčky naistalujeme.
|
1 2 3 |
npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-notify npm install browser-sync gulp --save-dev |
A nyní již upravím Gulpfile.js do podoby
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var notify = require('gulp-notify'); var browserSync = require('browser-sync').create(); // Static Server + watching scss/html files gulp.task('serve', ['styles'], function() { browserSync.init({ server: "./" }); gulp.watch('sass/**/*.scss',['styles']); gulp.watch("*.html").on('change', browserSync.reload); }); gulp.task('styles', function() { gulp.src('sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('./css/')) .pipe(notify({ message: 'Styles task complete' })) .pipe(browserSync.stream()); }); //Watch task gulp.task('default', ['serve']); |