Gulp手表不看.js文件



刚刚回到一个非常旧的项目,并更新到Gulp 4.0.2。

设法让它监视和编译css,但似乎没有监视JavaScript文件的更改?

它没有抛出任何错误,只是在我进行更改时不编译JS。

(我是一名设计师,我的JS很糟糕,所以你可能不得不为我拼出来)

gullfile.js

// Include gulp
var gulp = require('gulp');
// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------
var concat          = require('gulp-concat');
var include         = require('gulp-include');
var jshint          = require('gulp-jshint');
var map             = require('map-stream');
var notify          = require('gulp-notify');
var plumber         = require('gulp-plumber');
var postcss         = require('gulp-postcss');
var sass            = require('gulp-sass');
var cssnano         = require('gulp-cssnano');
var autoprefixer    = require('autoprefixer');
var replace         = require('gulp-replace');
var fs              = require('fs');
var path            = require('path');
var stripDebug      = require('gulp-strip-debug');
var uglify          = require('gulp-uglify');
var watch           = require('gulp-watch');

// --------------------------------------------------------------
// Paths
// ---------------------------------------------------------------
var base = path.join(__dirname, '/site/themes/theme_name/');
var basePaths  = {
src:       base + 'src/'
};
var paths = {
styles: {
src:    basePaths.src  + 'styles/',
dist:   base           + 'css/'
},
scripts: {
src:    basePaths.src  + 'scripts/custom/',
dist:   base           + 'js/'
},
vendor: {
src:    basePaths.src  + 'scripts/vendor/',
dist:   base           + 'js/'
}
};

// --------------------------------------------------------------
// Styles
// ---------------------------------------------------------------
gulp.task('styles', function() {
return gulp.src(paths.styles.src + 'styles.scss')
.pipe(include())
.pipe(plumber({errorHandler: errorStyles}))
.pipe(sass({style: "compressed", noCache: true}))
.pipe(cssnano({
autoprefixer: {browsers: ['> 0%', 'last 2 versions', 'Firefox >= 20'], add: true}
}))
.pipe(gulp.dest(paths.styles.dist))
});
function errorStyles(error) {
notify.onError({title: "Sass Error", message: "", sound: "Sosumi"})(error);
console.log(error.toString());
this.emit("end");
}

// --------------------------------------------------------------
// Scripts
// ---------------------------------------------------------------
gulp.task('scripts', function() {
return gulp.src(paths.scripts.src + '**/*')
.pipe(jshint())
.pipe(notify(function(file) {
if (file.jshint.success)
return false;
var errors = file.jshint.results.map(function(data) {
if (data.error)
return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason;
}).join("n");
return {
title: 'JavaScript error',
message: file.relative + " (" + file.jshint.results.length + " errors)n" + errors,
sound: 'Frog',
};
}))
.pipe(concat('script.js'))
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest(paths.scripts.dist))
});

// --------------------------------------------------------------
// Vendor
// ---------------------------------------------------------------
gulp.task('vendor', function() {
return gulp.src(paths.vendor.src + '**/*')
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest(paths.vendor.dist))
});

// --------------------------------------------------------------
// Watch
// ---------------------------------------------------------------
gulp.task('watch', function() {
gulp.watch(paths.styles.src  + '*.scss', gulp.parallel('styles'));
gulp.watch(paths.scripts.src + '/*.js',  gulp.parallel('scripts'));
gulp.watch(paths.vendor.src  + '/*.js',  gulp.parallel('vendor'));
});
gulp.task('default', gulp.parallel('styles', 'scripts', 'vendor', 'watch'));

paths.scripts.src + '/*.js'paths.vendor.src + '/*.js'包含一个额外的/

感谢Thomas Sablik

最新更新