0

So I have my Gulp file as below.

The 'watch' block seems to work absolutely fine, and do what is expected. Nodemon works in the way that it detects file changes and refreshes the server, that works too.

But I can't for the life of me get Nodemon to call the 'watch' method when a file changes.

On line 81, the .on('start' is called succesfully from nodemon, but the code inside the 'watch' method is never executed.

var gulp    = require('gulp');
var gutil   = require('gulp-util');      // For logging stats and warnings
var jshint  = require('gulp-jshint');    // For checking JavaScript for warnings
var concat  = require('gulp-concat');    // For joining together multiple files
var uglify  = require('gulp-uglify');    // For minimising files
var coffee  = require('gulp-coffee');    // For compiling coffee script into js
var cofLint = require('gulp-coffeelint');// For checking coffee script for errors
var less    = require('gulp-less');      // For compiling Less into CSS
var cssLint = require('gulp-csslint');   // For checking the awesomeness of css
var minCss  = require('gulp-minify-css');// For minifying css
var uncss   = require('gulp-uncss');     // For deleting unused CSS rules
var footer  = require('gulp-footer');    // For adding footer text into files
var nodemon = require('gulp-nodemon');   // For the super cool instant refreshing server
var bSync   = require('browser-sync');   // Syncs the place between multiple browsers for dev
var es      = require('event-stream');   // For working with streams rather than temp dirs

var sourcePath  = "sources";
var destPath    = "public";
var jsFileName  = "all.min.js";
var cssFileName = "all.min.css";
var footerText  = "";


/* JavaScript Tasks */
gulp.task('scripts',  function(){
    var jsSrcPath = sourcePath + '/javascript/**/*';
    var jsResPath = destPath + '/javascript';

    var jsFromCs = gulp.src(jsSrcPath+'.coffee')// Get all coffee script
        .pipe(cofLint())                        // Check CS for errors or warnings
        .pipe(cofLint.reporter())               // Output the error results
        .pipe(coffee());                        // Convert coffee to vanilla js

    var jsFromPlain = gulp.src(jsSrcPath+'.js');// get all vanilla JavaScript

   return es.merge(jsFromCs, jsFromPlain)       // Both js from cs and vanilla js
       .pipe(jshint())                          // Check js errors or warnings
       .pipe(jshint.reporter('jshint-stylish')) // Print js errors or warnings
       .pipe(concat(jsFileName,{newLine: ';'})) // Concatenate all files together
       .pipe(uglify())                          // Minify JavaScript
       .pipe(footer(footerText))                // Add footer to script
       .pipe(gulp.dest(jsResPath));             // Save to destination
});

/* CSS Tasks */
gulp.task('styles',  function(){
    var cssSrcPath = sourcePath + '/styles/**/*';
    var cssResPath = destPath + '/stylesheet';

    var cssFromLess = gulp.src(cssSrcPath+'.less')  // Get all Less code
        .pipe(less());                              // Convert Less to CSS

    var cssFromVanilla = gulp.src(cssSrcPath+'.css');// Get all CSS

    return es.merge(cssFromLess, cssFromVanilla)    // Combine both CSS
        .pipe(cssLint())                            // Check CSS for errors or warnings
        .pipe(cssLint.reporter())                   // And output the results
        .pipe(concat(cssFileName))                  // Concatenate all files together
        .pipe(minCss({compatibility: 'ie8'}))       // Minify the CSS
        .pipe(gulp.dest(cssResPath));               // Save to destination
});


/* Configure files to watch for changes */
gulp.task('watch', function() {
    gulp.watch(sourcePath+'/**/*.{js,coffee}', ['scripts']);
    gulp.watch(sourcePath+'/**/*.{css,less}',  ['styles']);
});

/* Start Nodemon */
gulp.task('demon', function () {
    nodemon({
        script: './bin/www',
        ext: 'js coffee css less html',
        env: { 'NODE_ENV': 'development'}
    })
        .on('start', ['watch'])//TODO: ERROR: watch is never called, even though start is called
        .on('change', ['watch'])
        .on('restart', function () {
            console.log('restarted!');
        });
});


/* Default Task */
gulp.task('default', ['demon']);

Any suggestions why this may be happening? Is there something wrong with my Gulp file?

Thanks in advance

(and yes, I know the code is a little over-commented, I work with apprentices and they like English better than code ;)

4

1 回答 1

0

问题是 Nodemon 和 browser-sync 都需要运行。此代码有效：

gulp.task('nodemon', function (cb) {
    var called = false;
    return nodemon({
        script: './bin/www',
        watch: ['source/**/*']
    })
        .on('start', function onStart() {
            if (!called) { cb(); }
            called = true;
        })
        .on('restart', function onRestart() {
            setTimeout(function reload() {
                bSync.reload({
                    stream: false
                });
            }, 500);
        });
});

gulp.task('browser-sync', ['nodemon', 'scripts', 'styles'], function () {
    bSync.init({
        files: ['sources/**/*.*'],
        proxy: 'http://localhost:3000',
        port: 4000,
        browser: ['google chrome']
    });
    gulp.watch(sourcePath+'/**/*.{js,coffee}', ['scripts']);
    gulp.watch(sourcePath+'/**/*.{css,less}',  ['styles']);
    gulp.watch("sources/**/*").on('change', bSync.reload);
    gulp.watch("views/**/*.jade").on('change', bSync.reload);
});



/* Default Task */
gulp.task('default', ['clean', 'browser-sync']);
于 2015-07-23T09:18:03.487 回答