使用 SASS、BrowserSync、Uglify 和 Nodemon 的 Express 的 Gulp 工作流

Question

我面临的问题：

• 浏览器不反映 .scss 或 .js 中的实时更改
• 我不明白我们是否必须从 gulp.task() 返回流，我访问了一些网站并观看了一些讲座，其中一些使用了返回，而另一些则没有。
• 无法理解 gulpfile 的执行流程（先运行哪个语句，然后再运行哪个等等）

这是我当前的代码gulpfile.js。

  "use strict";

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var nodemon = require('gulp-nodemon');
  var browserSync = require('browser-sync').create();
  var uglify = require('gulp-uglify');

  gulp.task('default', ['nodemon'], function(){
    gulp.watch("src/sass/*.scss", ['sass']);
    gulp.watch("src/js/*.js", ['js']);
    gulp.watch("views/*.ejs").on('change',browserSync.reload);   //Manual Reloading
  })

  // Process JS files and return the stream.
  gulp.task('js', function () {
      return gulp.src('src/js/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('public/javascripts'));
  });

  // Compile SASS to CSS.
  gulp.task('sass', function(){
       // gulp.src('src/sass/*.scss')  //without return or with return? why?
       return gulp.src('src/sass/*.scss')
               .pipe(sass().on('error', sass.logError))
               .pipe(gulp.dest('public/stylesheets'))
               .pipe(browserSync.stream());
  });


  // Setup proxy for local server.
  gulp.task('browser-sync', ['js','sass'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3000",
        port: 7000,
    });
  });


  gulp.task('nodemon', ['browser-sync'], function(cb){
    var running = false;
    return nodemon({script: 'bin/www'}).on('start', function(){
      if(!running)
      {
        running = true;
        cb();
      }
    });
  })

您可以在https://github.com/DivyanshBatham/GulpWorkflow查看项目结构

Answer 1

试试这个：

  "use strict";

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var nodemon = require('gulp-nodemon');
  var browserSync = require('browser-sync').create();
  var uglify = require('gulp-uglify');

  // First, run all your tasks
  gulp.task('default', ['nodemon', 'sass', 'js'], function(){

    // Then watch for changes
    gulp.watch("src/sass/*.scss", ['sass']);
    gulp.watch("views/*.ejs").on('change',browserSync.reload);   //Manual Reloading

    // JS changes need to tell browsersync that they're done
    gulp.watch("src/js/*.js", ['js-watch']);
  })

  // create a task that ensures the `js` task is complete before
  // reloading browsers
  gulp.task('js-watch', ['js'], function (done) {
      browserSync.reload();
      done();
  });

  // Process JS files and return the stream.
  gulp.task('js', function () {
      return gulp.src('src/js/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('public/javascripts'));
  });

  // Compile SASS to CSS.
  gulp.task('sass', function(){
      return gulp.src('src/sass/*.scss')
               .pipe(sass().on('error', sass.logError))
               .pipe(gulp.dest('public/stylesheets'))
               .pipe(browserSync.stream());
  });


  // Setup proxy for local server.
  gulp.task('browser-sync', ['js','sass'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3000",
        port: 7000,
    });
  });


  gulp.task('nodemon', ['browser-sync'], function(cb){
    var running = false;
    return nodemon({script: 'bin/www'}).on('start', function(){
      if(!running)
      {
        running = true;
        cb();
      }
    });
  })

另外，您应该考虑将 JS 文件添加到您的 index.ejs 例如：<script src='/javascripts/main.js'></script>

更多帮助：https://browsersync.io/docs/gulp

Answer 2

我会尽量回答。

1. 您不必总是在 gulp 任务中返回流，但您应该这样做，因为您有一些任务，例如依赖于其他任务的“浏览器同步”，['js','sass' ]，整理。返回流的目的是表示任务完成。这不是表示任务完成的唯一方法，而是一种简单的方法。 您已经在使用 return 语句的 ['js','sass'] 任务中执行此操作。

2. 您的“js”任务需要在其末尾添加一个.pipe(browserSync.stream()); 语句，就像您的“sass”任务一样。或者尝试.pipe(browserSync.reload({stream:true}));，有时这种变体效果更好。

3. 您同时运行 browser-sync 和 nodemon - 我认为这很不寻常，可能会导致问题 - 它们做的事情大致相同，通常不会看到它们一起运行。我会从你的文件中删除 nodemon。

4. 执行流程：

   (a) 默认调用 ['nodemon', 'sass', 'js'] ：它们并行运行。

   (b) nodemon 调用“浏览器同步”。 'browserSync' 必须在 'nodemon' 进入其功能之前完成设置。

   (c) 'browser-sync', ['js','sass'], 这里 browser-sync 依赖于 'js' 和 'sass' 并行运行并且必须完成并发出信号表明它们已经完成例如，在浏览器同步继续之前返回流。

   (d) 在 'js'、'sass'、'browser-sync' 和 'nodemon' 完成后，你的 watch 语句被设置并开始 watch。