Question

我的目录结构类似于：

  -client/
     index.html
     app.js
     js/
       -controllers/
       -directives/
     partials/
         someHTML.html
         anotherHTML.html

  -server
     server.js

我在客户端目录中设置了一个Gulpfile.js.我不确定如何设置监视任务，以便gulp自动重建和刷新我的浏览器。这是我一直在尝试的东西：

/*jshint globalstrict: true*/
'use strict';

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    clean = require('gulp-clean'),
    connect = require('gulp-connect'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish');


var liveReload = true;

gulp.task('clean', function () {
    return gulp.src(['./dist'], {
            read: false
        })
        .pipe(clean());
});

gulp.task('browserify', ['lint'], function () {
    // Single entry point to browserify
    gulp.src('app.js')
        .pipe(browserify({
            insertGlobals: true,
            debug: true
        }))
        .pipe(gulp.dest('./dest'));
});

gulp.task('lint', function () {
    return gulp.src(['gulpfile.js',
    'app.js',
    'controllers/*.js',
    'directives/*.js'
 ])
        .pipe(jshint())
        .pipe(jshint.reporter(stylish));
});

gulp.task('connect', function () {
    connect.server({
        root: '.',
        livereload: true
    });
});

gulp.task('html', function () {
    gulp.src(['./**/*.html', '!./node_modules/**'])
        .pipe(connect.reload());
});

gulp.task('watch', function () {
    gulp.watch(['./**/*.js', '!./node_modules/**'], ['html']);
});


gulp.task('default', ['clean', 'connect', 'watch'], function () {
    var liveReload = false;
    gulp.start('browserify');
});

Answer 1

下面这些链接帮助我找到答案：

Gulp Watch and Nodemon conflict
https://github.com/gulpjs/gulp/

对于那些感兴趣的人：下面是我的gulpfile

/*jshint globalstrict: true*/
'use strict';

var gulp = require('gulp'),
  browserify = require('gulp-browserify'),
  clean = require('gulp-clean'),
  jshint = require('gulp-jshint'),
  stylish = require('jshint-stylish'),
  stylus = require('gulp-stylus'),
  del = require('del'),
  nodemon = require('gulp-nodemon'),
  concat = require('gulp-concat');

var paths = {
  client: {
    scripts: 'client/js/**/*.js',
    html: ['client/partials/*.html', 'client/*.html'],
    css: 'client/css/*.styl'
  },
  server: {
    scripts: 'server/js/**/*.js'
  }

};

// Rerun the task when a file changes
gulp.task('watch', function () {
  gulp.watch(paths.client.css, ['stylus']);
  gulp.watch(paths.client.scripts, ['clientLint', 'browserify']);
  gulp.watch(paths.client.html, ['copyClientPartials', 'copyClientIndex']);
  gulp.watch(paths.server.scripts, ['serverLint']);
});


gulp.task('demon', function () {
  nodemon({
    script: 'server/js/server.js',
    ext: 'js',
    env: {
      'NODE_ENV': 'development'
    }
  })
    .on('start', ['watch'])
    .on('change', ['watch'])
    .on('restart', function () {
      console.log('restarted!');
    });
});

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


/********** Building CSS *********/
gulp.task('stylus', function () {

  del(['client/build/css/*']);

  gulp.src('client/css/*.styl')
    .pipe(stylus())
    .pipe(concat('all.css'))
    .pipe(gulp.dest('client/build/css/'));
});


gulp.task('clientLint', function () {
  return gulp.src([path.client.scripts])
    .pipe(jshint())
    .pipe(jshint.reporter(stylish));
});


gulp.task('serverLint', function () {
  return gulp.src([path.server.scripts])
    .pipe(jshint())
    .pipe(jshint.reporter(stylish));
});


gulp.task('browserify', function () {

  del(['client/build/js/*']);

  gulp.src('client/js/app.js')
    .pipe(browserify({
      insertGlobals: true,
      debug: true
    }))
    .pipe(gulp.dest('client/build/js'));
});

/********** copy HTML **********/

gulp.task('copyClientPartials', function () {
  del(['client/build/partials/*']);

  gulp.src(['client/partials/*.html'])
    .pipe(gulp.dest('client/build/partials'));
});

gulp.task('copyClientIndex', function () {
  del(['client/build/index.html']);
  gulp.src(['client/index.html'])
    .pipe(gulp.dest('client/build'));
});

如何设置gulp手表

1 个答案: