时间戳

首页 > 解决方案 > 为什么 gulp watch 连续输出starting\finished到终端

gulp - 为什么 gulp watch 连续输出starting\finished到终端

问题描述

将 gulp 迁移到 gulp 4 后，终端在一次更改\保存到 scss 文件后连续输出“Starting”和“Finished”。这是正常的吗？该脚本正在完成它的工作，但无限输出似乎不正确。我的脚本很小，所以也许有人看到了我看不到的东西。我的网站在 localhost IIS 7.5 网站上运行，绑定设置为 IP 地址。非常感谢您的帮助。谢谢！

添加的唯一 gulp 迁移是gulp.series('css')

var sitename = 'mysitename';

var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
newer = require('gulp-newer'),

// Name of working theme folder
root = '../' + sitename + '/',
scss = root + 'sass/';

// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compressed', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root + '/dist/css/'))
    //.pipe(browserSync.stream());
});

// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        host: 'example.com',
        proxy: 'example.com',
        port: 80
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], gulp.series('css') );
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});
gulp.task('default', gulp.series('watch') );

如果我的 style.scss 文件被保存，终端输出会无限继续......

C:\Workspace\mysite\gulp-dev>gulp  
[12:00:37] Using gulpfile  
C:\Workspace\mysite\gulp-dev\gulpfile.js   
[12:00:37] Starting 'default'...   
[12:00:37] Starting 'watch'...   
[Browsersync] Proxying: http://example.com   
[Browsersync] Access URLs:   
-----------------------------------  
       Local: http://localhost:81  
    External: http://example.com:81    
-----------------------------------  
          UI: http://localhost:3001    
UI External: http://example.com:3001    
-----------------------------------   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 117 ms   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 32 ms   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 55 ms   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 63 ms   
[12:00:49] Starting 'css'...   
[12:00:49] Finished 'css' after 26 ms

标签： gulpbrowser-sync

解决方案

发生这种情况是因为您正在查看要将 css 输出到的文件夹：

gulp.watch([root + '**/*.css'

.pipe(gulp.dest(root + '/dist/css/')

如果“globstar”[**] 单独存在于路径部分中，则它匹配零个或多个目录以及搜索匹配项的子目录。

“和子目录”是吸引你的部分。所以你的“ root/**/.css”包括“ root/dist/css”。每次触发“css”任务时，它都会再次写入您正在观看的文件夹，因此该任务会被重新触发......等等。这就是为什么您通常不会查看整个根目录，而只是查看 src 所在的任何位置，然后将其写入不同的位置。

全局底漆

推荐阅读