时间戳

首页 > 解决方案 > 我的 gulp 文件不会读取任何更改，但它运行时问题为零

webpack - 我的 gulp 文件不会读取任何更改，但它运行时问题为零

问题描述

问题是当我去编写新的 scss/css 时，它不会像它应该的那样关注变化。不知道我哪里错了。我的文件是否被错误地观看或根本没有被观看。当我运行 gulp 时，一切都运行良好，但文件更改时它不会自动更改。

 [16:21:41] Using gulpfile ~\Documents\DeMarcusW\starterkit\gulpfile.js
 [16:21:41] Starting 'default'...
 [16:21:41] Starting 'sass'...   
 [16:21:45] Finished 'sass' after 3.47 s
 [16:21:45] Starting 'webpack'...       
 [16:22:18] Version: webpack 4.42.0
 Built at: 03/14/2020 4:22:18 PM
        Asset      Size     Chunks             Chunk Names
 firstComp.js  3.87 KiB  firstComp  [emitted]  firstComp
    vendor.js  80.5 KiB     vendor  [emitted]  vendor
 Entrypoint firstComp = firstComp.js
 Entrypoint vendor = vendor.js
 [16:22:18] Finished 'webpack' after 34 s
 [16:22:18] Starting 'browser-sync'...
 [Browsersync] Access URLs:
  -------------------------------------
        Local: http://localhost:3000
     External: http://192.168.1.11:3000
  -------------------------------------
           UI: http://localhost:3001
  UI External: http://localhost:3001
  -------------------------------------
 [Browsersync] Serving files from: ./public

 var gulp = require('gulp');
 var sass = require('gulp-sass');
 var autoprefixer = require('gulp-autoprefixer');
 var browserSync = require('browser-sync');
 var reload = browserSync.reload;
 var cleanCSS = require('gulp-clean-css');
 var sourcemaps = require('gulp-sourcemaps');
 var shell = require('gulp-shell');
 const webpack_stream = require('webpack-stream')
 const webpack_config = require('./webpack.config.js');
 const path = require('path');


 gulp.task('webpack', () => {
   return webpack_stream(webpack_config)
       .pipe(gulp.dest(`${path.build}`));
 });



 gulp.task('sass', function () {
     return gulp.src('./src/scss/**/*.scss')//1.
       .pipe(sass.sync().on('error', sass.logError))//2.
       .pipe(autoprefixer({
         overrideBrowserslist: ['last 2 versions']
       }))
       .pipe(gulp.dest('./public/css'))//3.

       .pipe(browserSync.stream())
   });



 //reloads browser when change occurs
 gulp.task('browser-sync', () => {
   browserSync.init({
     server: './public',
     notify: false,
     open: false
   })
 })




 gulp.task('sass:minify', ()=> {
   return gulp.src('./public/css/*.css')//1.
     .pipe(sourcemaps.init())
     .pipe(cleanCSS())
     .pipe(sourcemaps.write())
     .pipe(gulp.dest('./public/css'))//3.

     .pipe(browserSync.stream())
 });


 gulp.task( 'default', gulp.series('sass', 'webpack', 'browser-sync'), ()=>{
   gulp.watch('./public/scss/**/*', ['sass'])
   gulp.watch('./public/js/**/*', ['webpack'])
   .pipe(gulp.dest('./public/js'))
 }),

 gulp.task('production', gulp.series('sass:minify'))

标签： webpacksassgulp

解决方案

这两个语句在 gulp v4 中不起作用（它们是 v3 样式的语法）：

gulp.watch('./public/scss/**/*', ['sass'])
gulp.watch('./public/js/**/*', ['webpack'])

改成：

gulp.watch('./public/scss/**/*', 'sass')
gulp.watch('./public/js/**/*', 'webpack')

如果你有多个任务要运行

gulp.watch('./public/scss/**/*', gulp.series('sass', 'otherTask'));

您也不能pipe在结尾处声明：

gulp.task( 'default', gulp.series('sass', 'webpack', 'browser-sync'), ()=>{
  gulp.watch('./public/scss/**/*', ['sass'])      // change as per above
  gulp.watch('./public/js/**/*', ['webpack'])     // change as per above
  .pipe(gulp.dest('./public/js'))                 // remove this
});

您尚未创建流，因此无法通过管道传输任何内容，只需删除该行即可。如果您需要移动 js 文件，请在其他地方进行。

推荐阅读