Gulp not watching files with gulp-watch plugin -
i'm trying rebuild files change in gulpfile.js using recipe via gulp-watch plugin. problem when run default task gulp
, doesn't watch files @ after saving of files want watch. doing wrong here in gulpfile.js? in advance.
/* ----------------------------------------------------- */ /* gulpfile.js /* ----------------------------------------------------- */ 'use strict'; // setup modules/gulp plugins var gulp = require('gulp'), del = require('del'), runsequence = require('run-sequence'), less = require('gulp-less'), // minifycss = require('gulp-minify-css'), fileinclude = require('gulp-file-include'), order = require('gulp-order'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), sourcemaps = require('gulp-sourcemaps'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), plumber = require('gulp-plumber'), watch = require('gulp-watch'), // browserify = require('browserify'), // sourcestream = require('vinyl-source-stream'), connect = require('gulp-connect'); // configure file paths var path = { dest: 'dist/', src: 'src/', includes: 'include/', less_src: 'src/frontend/less/', less_manifest: 'src/frontend/less/all.less', css_dest: 'dist/frontend/css/', js_src: 'src/frontend/js/', js_minified_out: 'all.js', js_dest: 'dist/frontend/js', img_src: 'src/frontend/img/', img_dest: 'dist/frontend/img/', }; // clean out build folder each time gulp runs gulp.task('clean', function (cb) { del([ path.dest ], cb); }); // compile less gulp.task('less', function(){ return gulp.src(path.less_manifest) .pipe(watch(path.less_manifest)) .pipe(plumber({ handleerror: function (err) { console.log(err); this.emit('end'); } })) .pipe(sourcemaps.init()) .pipe(less()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(path.css_dest)) .pipe(connect.reload()); }); // allow html files included gulp.task('html', function() { return gulp.src([path.src + '*.html']) .pipe(watch(path.src + '*.html')) .pipe(plumber({ handleerror: function (err) { console.log(err); this.emit('end'); } })) .pipe(fileinclude({ prefix: '@@', basepath: path.includes })) .pipe(gulp.dest(path.dest)) .pipe(connect.reload()); }); // concatenate , minify javascript gulp.task('js', function() { return gulp.src(path.js_src + '**/*.js') .pipe(watch(path.js_src + '**/*.js')) .pipe(order([ path.js_src + 'framework/*.js', path.js_src + 'vendor/*.js', path.js_src + 'client/*.js' ], {base: '.'} )) .pipe(concat(path.js_minified_out)) .pipe(uglify()) .pipe(gulp.dest(path.js_dest)) .pipe(connect.reload()); }); // minify images gulp.task('imagemin', function () { return gulp.src(path.img_src + '**/*') .pipe(imagemin({ progressive: true, use: [pngquant()] })) .pipe(gulp.dest(path.img_dest)); }); // copy folders gulp.task('copy', function() { gulp.src(path.src + 'extjs/**/*') .pipe(gulp.dest(path.dest + 'extjs/')); // copy bower components build folder gulp.src('bower_components/**/*') .pipe(gulp.dest('dist/bower_components/')); }); // connect server , livereload pages gulp.task('connect', function() { connect.server({ root: path.dest, livereload: true }); }); // organize build tasks 1 task gulp.task('build', ['less', 'html', 'js', 'imagemin', 'copy']); // organize server tasks 1 task gulp.task('server', ['connect']); // default task gulp.task('default', function(cb) { // clean out dist/ folder before else runsequence('clean', ['build', 'server'], cb); });
try , remove watch build tasks, , have separate tasks handle watching. like:
gulp.task("watch-less", function() { watch(path.less_manifest, function () { gulp.start("less"); )); });
that way, it'll trigger task when file changes. , task watching able run separate build (which make life easier if use form of build automation).
also, can specify many watch tasks, so:
gulp.task("watch", function() { watch(paths.foo, function() { gulp.start("foo"); }); watch(paths.bar, function() { gulp.start("bar"); }); });
Comments
Post a Comment