代码之家  ›  专栏  ›  技术社区  ›  Federico Artía

节点+吞咽-必须保存文件两次才能在浏览器中看到更改

  •  0
  • Federico Artía  · 技术社区  · 7 年前

    Node、gulp和gulp的插件列表 .

    这发生在 我的任何html、scss或js文件 在我的源目录下。

    我正在使用Visual Studio代码在Windows 10上工作,除此之外,一切正常。

        var gulp = require('gulp');
        var sass = require('gulp-sass');
        var inject = require('gulp-inject');
        var wiredep = require('wiredep').stream;
        var plumber = require('gulp-plumber');
        var imagemin = require('gulp-imagemin');
        var browserSync = require('browser-sync');
        var uglify = require('gulp-uglify');
    
        gulp.task('styles', function(){
          var injectFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
          var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});
    
         function transformFilepath(filepath) {
            return '@import "' + filepath + '";';
          }
    
          var injectFilesOptions = {
            transform: transformFilepath,
            starttag: '// inject:app',
            endtag: '// endinject',
            addRootSlash: false
          };
    
          var injectGlobalOptions = {
            transform: transformFilepath,
            starttag: '// inject:global',
            endtag: '// endinject',
            addRootSlash: false
          };
    
          return gulp.src('src/styles/main.scss')
            .pipe(plumber())
            .pipe(wiredep())
            .pipe(inject(injectGlobalFiles, injectGlobalOptions))
            .pipe(inject(injectFiles, injectFilesOptions))
            .pipe(sass())
            .pipe(gulp.dest('dist/styles'));
        });
    
        gulp.task('browser-sync', function() {  
          browserSync.init(["styles/*.css", "js/*.js","index.html"], {
              server: {
                  baseDir: "dist"
              }
          });
        });
    
        gulp.task('html', ['styles'], function(){
          var injectFiles = gulp.src('src/styles/*.scss', {read: false});
          var injectOptions = {
            addRootSlash: false,
            ignorePath: ['src', 'dist']
          };
    
          return gulp.src('src/index.html')
            .pipe(plumber())
            .pipe(inject(injectFiles, injectOptions))
            .pipe(gulp.dest('dist'));
        });
    
        gulp.task('imagemin', function() {
          gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
          .pipe(plumber())
          .pipe(imagemin())
          .pipe(gulp.dest('dist/assets'));
        });
    
        gulp.task('uglify', function() {
          gulp.src('src/js/*.js')
              .pipe(uglify())
              .pipe(gulp.dest('dist/js'));
        });
    
        gulp.task('sass', function() {
          gulp.src('src/styles/*.scss')
              .pipe(plumber())
              .pipe(sass())
              .pipe(gulp.dest('dist/styles/'));
        });
    
        gulp.task('watch', function() {
          gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
          gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
          gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
          gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
        });
    
    
    
    gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);
    

    任何帮助都将不胜感激。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Mark    7 年前

    尝试以下更改:

    var browserSync = require('browser-sync').create();
    
     gulp.task('watch', function() {
      gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload({ stream:true }));
      gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload({ stream:true }));
      gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
      gulp.watch('src/index.html', ['html']).on('change', browserSync.reload());
    });
    

    .pipe(browserSync.reload({ stream:true }));
    

    希望这有帮助。

    gulp.task('watch', function() {
      gulp.watch('src/js/*.js', ['uglify']);
      gulp.watch('src/styles/*.scss', ['sass']);
      gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']);
      gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
    });
    
    gulp.task('imagemin', function() {
      return gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
        .pipe(plumber())
        .pipe(imagemin())
        .pipe(gulp.dest('dist/assets'));
        .pipe(browserSync.reload({ stream:true }));
    });
    
    gulp.task('uglify', function() {
      return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
        .pipe(browserSync.reload({ stream:true }));
    });
    
    gulp.task('sass', function() {
      return gulp.src('src/styles/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('dist/styles/'));
        .pipe(browserSync.reload({ stream:true }));
    });
    

    你肚子里的其他部分不会改变。除了进行之前建议的更改外:

    var browserSync = require('browser-sync').create();