Question

所以我的Gulp文件如下所示。

'watch'块看起来绝对正常，并且做了预期的事情。 Nodemon以检测文件更改和刷新服务器的方式工作，这也有效。

但是我不能为我的生活让Nodemon在文件发生变化时调用'watch'方法。

在第81行，.on（'start'从nodemon成功调用，但'watch'方法中的代码永远不会被执行。

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']);

为什么会发生这种情况的任何建议？我的Gulp文件有问题吗？

提前致谢

（是的，我知道代码有点过分评论，我和学徒一起工作，他们喜欢英语比代码更好;）

Answer 1

问题是Nodemon和浏览器同步都需要运行。此代码有效：

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']);

Gulp表没有在Nodemon内调用

1 个答案: