browser sync - Gulp tasks chaining -
i'm using gulp compile .less files , inject changes in browser live-reload.
this task created:
var gulp = require('gulp'); var less = require('gulp-less'); var watch = require('gulp-watch'); var plumber = require('gulp-plumber'); var livereload = require('gulp-livereload'); var path = require('path'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer-core'); var mqpacker = require('css-mqpacker'); var csswring = require('csswring'); gulp.task('less', function() { var processors = [ autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), mqpacker, csswring({ preservehacks: true, removeallcomments: true }) ]; gulp.src('./css/style.less') // compile entry file .pipe(plumber()) .pipe(less({ paths: ['./css/'], } )) .pipe(postcss(processors)) .pipe(plumber.stop()) .pipe(gulp.dest('./css/')) .pipe(livereload()); }); gulp.task('watch', function() { gulp.watch('./**/*.less', ['less']); // watch .less files, run less task }); gulp.task('default', ['watch']); // default run 'entry' watch task i created other gulp task perform same tasks using browser-sync instead of live-reload cross testing:
var gulp = require('gulp'); var less = require('gulp-less'); var watch = require('gulp-watch'); var plumber = require('gulp-plumber'); var path = require('path'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer-core'); var csswring = require('csswring'); var browsersync = require('browser-sync').create(); var reload = browsersync.reload; gulp.task('less', function() { var processors = [ autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), csswring({ preservehacks: true, removeallcomments: true }) ]; gulp.src('./css/style.less') // compile entry file .pipe(plumber()) .pipe(less({ paths: ['./css/'] } )) .pipe(postcss(processors)) .pipe(plumber.stop()) .pipe(gulp.dest('./css/')) .pipe(reload({stream: true})) // .pipe(livereload()); }); gulp.task('serve', ['less'], function() { browsersync.init({ proxy: "http://my-site.dev/" }); gulp.watch("./css/*.less", ['less']); }); i tried compile both files able run either task depending on if i'm doing local development or if testing. i've created "less" task compile css, "lrl" live reload watch task , "bs" browser-sync watch task. created "less" task remove duplication when change css browser reload instead of injecting css.
var gulp = require('gulp'); var less = require('gulp-less'); var watch = require('gulp-watch'); var plumber = require('gulp-plumber'); var path = require('path'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer-core'); var csswring = require('csswring'); var livereload = require('gulp-livereload'); var browsersync = require('browser-sync').create(); var reload = browsersync.reload; gulp.task('less', function() { var processors = [ autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), csswring({ preservehacks: true, removeallcomments: true }) ]; gulp.src('./css/style.less') // compile entry file .pipe(plumber()) .pipe(less({ paths: ['./css/'] } )) .pipe(postcss(processors)) .pipe(plumber.stop()) .pipe(gulp.dest('./css/')) }); gulp.task('lrl',['less'], function(){ gulp.src('./css/style.less') // compile entry file .pipe(livereload()); }); gulp.task('watch',['lrl'], function() { livereload.listen(); gulp.watch('./**/*.less', ['lrl']); // watch .less files, run less task }); // browser-sync setup gulp.task('bs',['less'], function(){ gulp.src('./css/style.less') // compile entry file .pipe(reload({stream: true})) }); gulp.task('serve', function() { browsersync.init({ proxy: "http://my-site.dev/" }); gulp.watch("./css/*.less", ['bs']); gulp.watch("./js/script.js").on('change', reload); gulp.watch("./templates/*.php").on('change', reload); }); // run default task live reload local development gulp.task('default', ['watch']); // default run 'entry' watch task i'm bit confused way call tasks within tasks. there way make sure css injected, it's faster work on design way.
thanks lot
=================== big edit ============================
i've been messing run-sequence still have same problem. in way task working. default task live-reload on local server only. gulp serve server can debug layout across browsers , devices. problem don't css injection anymore. looks gulp keeps re-running of tasks , refresh browser reconnect it.
so made working version duplicated code make i'm trying achieve clearer
var gulp = require('gulp'), less = require('gulp-less'), watch = require('gulp-watch'), plumber = require('gulp-plumber'), path = require('path'), postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer-core'), mqpacker = require('css-mqpacker'), csswring = require('csswring'), livereload = require('gulp-livereload'), browsersync = require('browser-sync').create(), reload = browsersync.reload; gulp.task('less-lrl', function() { var processors = [ autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), mqpacker, csswring({ preservehacks: true, removeallcomments: true }) ]; gulp.src('./css/style.less') // compile entry file .pipe(plumber()) .pipe(less({ paths: ['./css/'], } )) .pipe(postcss(processors)) .pipe(plumber.stop()) .pipe(gulp.dest('./css/')) .pipe(livereload()); }); gulp.task('watch', function() { livereload.listen(); gulp.watch('./**/*.less', ['less-lrl']); // watch .less files, run less task }); gulp.task('less-bs', function() { var processors = [ autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), mqpacker, csswring({ preservehacks: true, removeallcomments: true }) ]; gulp.src('./css/style.less') // compile entry file .pipe(plumber()) .pipe(less({ paths: ['./css/'] } )) .pipe(postcss(processors)) .pipe(plumber.stop()) .pipe(gulp.dest('./css/')) .pipe(reload({stream: true})) }); gulp.task('serve', ['less-bs'], function() { browsersync.init({ proxy: "http://myserver.dev" }); gulp.watch("./css/*.less", ['less-bs']); }); gulp.task('default', ['watch']); // default run 'entry' watch task when works smoothly. wanted avoid code duplication "less-lrl" , "less-bs" tasks. thing differ .pipe(livereload()); , .pipe(reload({stream: true}))
there's stoopid going on in brain, don't haz understand :)
note - please not use both less , postcss together, since postcss invented replace , enhance less does. google it..
please make sure less files path correct!
try this:
var gulp = require('gulp'), less = require('gulp-less'), watch = require('gulp-watch'), plumber = require('gulp-plumber'), path = require('path'), postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer-core'), csswring = require('csswring'), livereload = require('gulp-livereload'), browsersync = require('browser-sync').create(), reload = browsersync.reload; gulp.task('less', function() { var processors = [ autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), csswring({ preservehacks: true, removeallcomments: true }) ]; gulp.src('./**/*.less') // compile entry file .pipe(plumber()) .pipe(less({ paths: ['./css/'] } )) .pipe(postcss(processors)) .pipe(plumber.stop()) .pipe(gulp.dest('./css/')) .pipe(livereload()); }); gulp.task('watch', function() { livereload.listen(); gulp.watch('./**/*.less', ['less']); // watch .less files, run less task }); // browser-sync setup gulp.task('bs',['less'], function(){ gulp.src('./css/style.less') // compile entry file .pipe(reload({stream: true})) }); gulp.task('serve', function() { browsersync.init({ proxy: "http://my-site.dev/" }); gulp.watch("./css/*.less", ['bs']); gulp.watch("./js/script.js").on('change', reload); gulp.watch("./templates/*.php").on('change', reload); }); // run default task live reload local development gulp.task('default', ['less', 'watch']); // default run 'entry' watch task
Comments
Post a Comment