0

私が直面している問題:

  • ブラウザーが .scss または .js のライブ変更を反映しない
  • gulp.task() からストリームを返す必要があるかどうかはわかりません。いくつかの Web サイトにアクセスして、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

これを試して：

  "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 に答える