0

我面临的问题：

  • 浏览器不反映 .scss 或 .js 中的实时更改
  • 我不明白我们是否必须从 gulp.task() 返回流，我访问了一些网站并观看了一些讲座，其中一些使用了 return，有些没有。
  • 看不懂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查看项目结构

4

2 回答 2

0

我会尽量回答。

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

  2. 你的 'js' 任务需要一个.pipe(browserSync.stream()); 声明，就像你的 'sass' 任务一样。或者尝试.pipe(browserSync.reload({stream:true}));有时该变体效果更好。

  3. 您同时运行了浏览器同步和 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。

于 2018-03-21T20:44:16.867 回答
0

尝试这个：

  "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

于 2018-03-21T20:38:55.923 回答