Javascript 为什么gulp watch运行所有任务?
我有一个gulpfile.js来编译我的sass和javascript。在文件的底部,我有一个任务监视任何sass或javascript文件中的更改:Javascript 为什么gulp watch运行所有任务?,javascript,gulp,Javascript,Gulp,我有一个gulpfile.js来编译我的sass和javascript。在文件的底部,我有一个任务监视任何sass或javascript文件中的更改: // Load plugins var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'),
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
// Styles
gulp.task('styles', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('web'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('web'));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('js/**/*.js')
.pipe(jshint('node_modules/gulp-jshint/.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('web'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('web'));
});
// Images
gulp.task('images', function() {
return gulp.src('img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('web'));
});
// Clean
gulp.task('clean', function() {
return gulp.src(['web'], {read: false})
.pipe(clean());
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// Start livereload
gulp.task('start-livereload', function () {
server.listen(35729, function (err) {
if (err) {
return console.log(err);
}
});
});
// Watch
gulp.task('dev', ['start-livereload'], function() {
console.log('running');
// Watch .scss files
gulp.watch('sass/**/*.scss', {mode: 'poll'}, ['styles']);
// Watch .js files
gulp.watch('js/**/*.js', {mode: 'poll'}, ['scripts']);
// Watch image files
gulp.watch('img/**/*', {mode: 'poll'}, ['images']);
// Create LiveReload server
var server = livereload();
// Watch any files in dist/, reload on change
gulp.watch(['web/**']).on('change', function(file) {
server.changed(file.path);
});
});
当我在终端中运行gulpdev
并更改sass文件时,sass编译器和javascript编译器都会运行。当我更改javascript文件时也会发生同样的情况
如何更改它,以便在更改Sass文件时只编译Sass,而在更改javascript文件时只编译javascript?您注意到了吗,您注意到源目录和目标目录中的文件更改了吗?因此,如果源代码被更改并编译,目标目录可能会被触及。这将继承目标目录的监视任务 此外,您还可以在
样式
和脚本
任务中设置两次目标:
.pipe(gulp.dest('web'));
致以最诚挚的问候。我把我的经历写在这里,也许对某人有所帮助
我使用Dropbox进行我的项目,并在那里工作。当Dropbox打开时,任务会运行两次,因为Dropbox检测到文件更改并执行某些操作,从而再次触发任务 请出示您的整个gulpfile我已经更新了问题以包括我的整个gulp文件我相信使用
dest()
两次将输出a)一个常规的.css文件和b)一个缩小的文件。@kleinfeun您是对的。没有收到关于重命名行的通知。不知道为什么。好奇,我也这么做。我希望有一个缩小的文件(.min.css
),并保留一个常规文件用于调试。