Question

我面临的问题：

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

这是我目前的l = [] groups = ['a','a #2','a(Old)'] for i in groups: if ('#') in i: l.append(i[:i.index('#')].strip()) elif ('(Old)') in i: l.append(i[:i.index('(Old)')].strip()) else: l.append(i) groups = set(l)代码。

gulpfile.js

您可以在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

我会尽我所能。

您不必总是在gulp任务中返回流，但是您应该有一些任务，例如依赖于其他任务的'browser-sync'，['js'，'sass' ]，整理。返回流的目的是发出任务完成信号。它不是发出任务完成信号的唯一方法，而是一种简单的方法。您已使用return语句在['js'，'sass']任务中执行此操作。
你的'js'任务需要一个.pipe(browserSync.stream());语句，就像你的'sass'任务一样。或者尝试.pipe(browserSync.reload({stream:true}));有时候这种变体会更好。
你有浏览器同步和nodemon运行 - 我认为这是不寻常的并且可能会导致问题 - 它们做同样的事情并且通常不会看到它们一起运行。我会从你的文件中删除nodemon。
执行流程：

（a）默认调用['nodemon'，'sass'，'js']：这些并行运行。

（b）nodemon调用'browser-sync'。 “browserSync”必须在“nodemon”进入其功能之前完成设置。

（c）'browser-sync'，['js'，'sass']，这里的浏览器同步依赖于并行运行的'js'和'sass'，必须完成并发出信号表示已完成例如，在浏览器同步继续之前返回流。

（d）在'js'，'sass'，'browser-sync'和'nodemon'完成后，您的观察声明已经设置并开始观看。

使用SASS，BrowserSync，Uglify和Nodemon实现Express的Gulp工作流程

2 个答案: