【发布时间】:2020-12-31 22:47:33
【问题描述】:
刚刚回到一个非常老的项目并更新到 Gulp 4.0.2。
设法让它监视和编译 css,但似乎没有监视 JavaScript 文件的更改?
它不会抛出任何错误,只是在我进行更改时不会编译 JS。
(我是一名设计师,我的 JS 很糟糕,所以你可能需要真正为我拼写出来????)
gulpfile.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'));
【问题讨论】:
-
您是否更改了脚本的路径?
-
嘿,不,它是相同的路径(该项目在其他方面都没有变化,而且我在 2018 年最后一次接触它时它肯定是有效的)。我什至尝试输入绝对路径,但也没有用。
-
paths.scripts.src + '/*.js'和paths.vendor.src + '/*.js'包含一个额外的/。是这个问题吗? -
做到了!太奇怪了,因为我没有碰过任何路径,而且它以前有效。也许 Gulp 4 对路径或其他东西更敏感。谢谢你,新年快乐!
标签: javascript gulp gulp-watch