Мой файл gulp не читает никаких изменений, но работает без проблем - PullRequest
Новая
       3

Мой файл gulp не читает никаких изменений, но работает без проблем

0 голосов
/ 15 марта 2020

Проблема в том, что когда я go пишу новый 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'))

1 Ответ

1 голос
/ 15 марта 2020

Эти два оператора не будут работать в gulp v4 (они имеют синтаксис в стиле v3): 

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

Измените на: 

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

и если у вас было несколько задач на run 

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 файлы, сделайте это в другом месте.

...