如何 运行 任务（更改文件）并避免循环，如果此文件更改时此任务开始
How to run task (that changes file) and avoid loop, if this task starts when this file changes
我有任务：
- "styles" 将我的 Sass 代码编译成 css
- "watch" 将在 .sass 文件更改时 "styles" 启动
- "deafult" 即启动所有任务
一切正常，直到我想对我的属性进行排序，我发现 sass-sort 模块可以从 CLI 运行。我还下载了 gulp-exec 模块，所以我可以将命令 sortsass ./src/styles/main.sass 添加到我的任务 styles
我尝试从 "styles" 中取出 .pipe(exec('sortsass ./src/styles/main.sass'))，创建新任务，并将其添加到 "watch" 任务（因此在文件更改后，任务 "styles" 和新任务开始），结果相同。还尝试了 google 其他方法来对 .sass 文件中的属性进行排序（style lint 与 scss 一起工作得很好，但我正在与 sass 一起工作），试图找到vscode 的扩展可以做到这一点..
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const del = require('del');
const imagemin = require('gulp-imagemin')
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const exec = require('gulp-exec');
gulp.task('clean', function() {
return del([
'build/*']);
});
gulp.task('markup', function() {
return gulp.src([
'./src/**/*.html'
], {base: './src/'})
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream());
});
gulp.task('styles', function() {
return gulp.src([
'./src/**/*.sass'
], {base: './src/'})
.pipe(exec('sortsass ./src/styles/main.sass'))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(cleanCSS({level: 2}))
.pipe(autoprefixer({Browserslist: ['last 2 versions'], cascade: false}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream())
});
gulp.task('scripts', function() {
return gulp.src([
'./src/js/lib.js',
'./src/js/main.js',
], {base: './src/'})
.pipe(uglify({toplevel: true}))
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream());
});
gulp.task('concat-scripts', function() {
return gulp.src([
'./build/js/lib.js',
'./build/js/main.js',
])
.pipe(concat('script.js'))
.pipe(gulp.dest('./build/js/'))
.pipe(browserSync.stream());
})
gulp.task('images', function() {
return gulp.src([
'./src/img/**'
], {base: './src/'})
.pipe(imagemin({progressive: true}))
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream());
});
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: "./build/"
}
});
gulp.watch('./src/**/*.html', gulp.series('markup'))
gulp.watch('./src/**/*.sass', gulp.series('styles'))
gulp.watch('./src/**/*.js', gulp.series('scripts', 'concat-scripts'))
gulp.watch('./src/**/img/**/*', gulp.series('images'))
});
gulp.task('trash', function() {
return del([
'./build/styles/media.css',
'./build/styles/media.css.map',
'./build/js/lib.js',
'./build/js/main.js',
]);
});
gulp.task('default', gulp.series(gulp.series('clean',
gulp.parallel('markup',
'images',
'styles',
'scripts')),
'concat-scripts',
'trash',
'watch'))
当我开始 'default' 任务时：
[19:35:15] Using gulpfile ~\Desktop\projects\new\gulpfile.js
[19:35:15] Starting 'default'...
[19:35:15] Starting 'clean'...
[19:35:15] Finished 'clean' after 34 ms
[19:35:15] Starting 'markup'...
[19:35:15] Starting 'images'...
[19:35:15] Starting 'styles'...
[19:35:15] Starting 'scripts'...
[19:35:15] gulp-imagemin: Minified 0 images
[19:35:15] Finished 'images' after 58 ms
[19:35:15] Finished 'markup' after 61 ms
[19:35:15] Finished 'scripts' after 61 ms
[19:35:15] Finished 'styles' after 239 ms
[19:35:15] Starting 'concat-scripts'...
[19:35:15] Finished 'concat-scripts' after 9.62 ms
[19:35:15] Starting 'trash'...
[19:35:15] Finished 'trash' after 5.4 ms
[19:35:15] Starting 'watch'...
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.0.4:3000
------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
------------------------------------
[Browsersync] Serving files from: ./build/
and when I am changing sass file
[19:36:46] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:47] Finished 'styles' after 264 ms
[19:36:47] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:47] Finished 'styles' after 228 ms
[19:36:47] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:48] Finished 'styles' after 223 ms
[19:36:48] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:48] Finished 'styles' after 207 ms
[19:36:48] Starting 'styles'...
这个循环是无限的，直到我关闭终端
所以现在真正的问题更多的是如何对属性进行排序，然后是如何避免循环。但我会对任何解决方案感到满意（避免循环，或另一种排序属性的方法：vscode 的扩展， gulp等的插件）
CSSComb 帮助了我。安装在 vscode
我有任务：
- "styles" 将我的 Sass 代码编译成 css
- "watch" 将在 .sass 文件更改时 "styles" 启动
- "deafult" 即启动所有任务
一切正常，直到我想对我的属性进行排序，我发现 sass-sort 模块可以从 CLI 运行。我还下载了 gulp-exec 模块，所以我可以将命令 sortsass ./src/styles/main.sass 添加到我的任务 styles
我尝试从 "styles" 中取出 .pipe(exec('sortsass ./src/styles/main.sass'))，创建新任务，并将其添加到 "watch" 任务（因此在文件更改后，任务 "styles" 和新任务开始），结果相同。还尝试了 google 其他方法来对 .sass 文件中的属性进行排序（style lint 与 scss 一起工作得很好，但我正在与 sass 一起工作），试图找到vscode 的扩展可以做到这一点..
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const del = require('del');
const imagemin = require('gulp-imagemin')
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const exec = require('gulp-exec');
gulp.task('clean', function() {
return del([
'build/*']);
});
gulp.task('markup', function() {
return gulp.src([
'./src/**/*.html'
], {base: './src/'})
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream());
});
gulp.task('styles', function() {
return gulp.src([
'./src/**/*.sass'
], {base: './src/'})
.pipe(exec('sortsass ./src/styles/main.sass'))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(cleanCSS({level: 2}))
.pipe(autoprefixer({Browserslist: ['last 2 versions'], cascade: false}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream())
});
gulp.task('scripts', function() {
return gulp.src([
'./src/js/lib.js',
'./src/js/main.js',
], {base: './src/'})
.pipe(uglify({toplevel: true}))
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream());
});
gulp.task('concat-scripts', function() {
return gulp.src([
'./build/js/lib.js',
'./build/js/main.js',
])
.pipe(concat('script.js'))
.pipe(gulp.dest('./build/js/'))
.pipe(browserSync.stream());
})
gulp.task('images', function() {
return gulp.src([
'./src/img/**'
], {base: './src/'})
.pipe(imagemin({progressive: true}))
.pipe(gulp.dest('./build/'))
.pipe(browserSync.stream());
});
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: "./build/"
}
});
gulp.watch('./src/**/*.html', gulp.series('markup'))
gulp.watch('./src/**/*.sass', gulp.series('styles'))
gulp.watch('./src/**/*.js', gulp.series('scripts', 'concat-scripts'))
gulp.watch('./src/**/img/**/*', gulp.series('images'))
});
gulp.task('trash', function() {
return del([
'./build/styles/media.css',
'./build/styles/media.css.map',
'./build/js/lib.js',
'./build/js/main.js',
]);
});
gulp.task('default', gulp.series(gulp.series('clean',
gulp.parallel('markup',
'images',
'styles',
'scripts')),
'concat-scripts',
'trash',
'watch'))
当我开始 'default' 任务时：
[19:35:15] Using gulpfile ~\Desktop\projects\new\gulpfile.js
[19:35:15] Starting 'default'...
[19:35:15] Starting 'clean'...
[19:35:15] Finished 'clean' after 34 ms
[19:35:15] Starting 'markup'...
[19:35:15] Starting 'images'...
[19:35:15] Starting 'styles'...
[19:35:15] Starting 'scripts'...
[19:35:15] gulp-imagemin: Minified 0 images
[19:35:15] Finished 'images' after 58 ms
[19:35:15] Finished 'markup' after 61 ms
[19:35:15] Finished 'scripts' after 61 ms
[19:35:15] Finished 'styles' after 239 ms
[19:35:15] Starting 'concat-scripts'...
[19:35:15] Finished 'concat-scripts' after 9.62 ms
[19:35:15] Starting 'trash'...
[19:35:15] Finished 'trash' after 5.4 ms
[19:35:15] Starting 'watch'...
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.0.4:3000
------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
------------------------------------
[Browsersync] Serving files from: ./build/
and when I am changing sass file
[19:36:46] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:47] Finished 'styles' after 264 ms
[19:36:47] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:47] Finished 'styles' after 228 ms
[19:36:47] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:48] Finished 'styles' after 223 ms
[19:36:48] Starting 'styles'...
[Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
[19:36:48] Finished 'styles' after 207 ms
[19:36:48] Starting 'styles'...
这个循环是无限的，直到我关闭终端
所以现在真正的问题更多的是如何对属性进行排序，然后是如何避免循环。但我会对任何解决方案感到满意（避免循环，或另一种排序属性的方法：vscode 的扩展， gulp等的插件）
CSSComb 帮助了我。安装在 vscode