Gulp 不通知 JS 错误,也不在运行 gulp 时编译 scss 文件
Gulp not notifying JS errors and not compiling scss files on running gulp
我一直在尝试改进我的标准gulpfile,以便在编译scss和JS时发生错误时发出通知。
SCSS问题
我让它为 SCSS 工作,它会在终端中抛出错误,发出噪音并且不会停止吞咽运行 - 这很棒。
奇怪的是,我的样式曾经在我运行时编译 gulp
,但现在我需要保存其中一个 .scss 文件才能开始 gulp(同样这很好,但我希望它在运行gulp
时编译)。
gulp
[12:07:06] Using gulpfile ~PATH/gulpfile.js
[12:07:06] Starting 'scripts'...
[12:07:06] Starting 'watch'...
[12:07:06] Finished 'watch' after 32 ms
[12:07:07] PATH/js/script-dist.js reloaded.
[12:07:07] Finished 'scripts' after 455 ms
[12:07:07] Starting 'default'...
[12:07:07] Finished 'default' after 15 μs
JS问题
我还试图通知错误以及它们在 JS 中的确切来源(并且还可以防止在发生错误时停止 gulp)。尝试添加gulp-jshint
,但它似乎不起作用。它用噪音等标记错误...但没有告诉我错误位于哪个级联文件中。它只是说:
Error in plugin 'gulp-uglify'
Message:
[_PATH_]/js/script-dist.js: Unexpected token keyword «var», expected punc «{»
Details:
fileName: [_PATH_]/js/script-dist.js
lineNumber: 3
这是我的gulpfile.js
var gulp = require('gulp');
// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
// --------------------------------------------------------------
// JS
// ---------------------------------------------------------------
gulp.task('scripts', function() {
return gulp.src(['./js/script.js'])
.pipe(include())
.pipe(plumber({errorHandler: errorScripts}))
.pipe(concat('script-dist.js'))
//.pipe(stripDebug())
.pipe(jshint())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
// --------------------------------------------------------------
// Styles
// ---------------------------------------------------------------
gulp.task("styles", function(){
return gulp.src("./ui/scss/styles.scss")
.pipe(include())
.pipe(plumber({errorHandler: errorStyles}))
.pipe(sass({style: "compressed", noCache: true}))
.pipe(minifycss())
.pipe(gulp.dest("./ui/css/"))
.pipe(livereload());
});
// --------------------------------------------------------------
// Errors
// ---------------------------------------------------------------
// Styles
function errorStyles(error){
notify.onError({title: "SCSS Error", message: "Check your terminal", sound: "Sosumi"})(error); //Error Notification
console.log(error.toString()); //Prints Error to Console
this.emit("end"); //End function
};
// Scripts
function errorScripts(error){
notify.onError({title: "JS Error", message: "Check your terminal", sound: "Sosumi"})(error); //Error Notification
console.log(error.toString()); //Prints Error to Console
this.emit("end"); //End function
};
// --------------------------------------------------------------
// Watch & Reload
// ---------------------------------------------------------------
gulp.task('watch', function() {
gulp.watch('./ui/scss/*.scss', ['styles']);
gulp.watch(['./js/*.js', '!./js/script-dist.js'], ['scripts']);
});
gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
livereload.listen();
(我的JS不是很好,所以请耐心等待)
更新
我现在已经设法将JS错误探测到终端,但不确定如何报告错误实际上是什么,错误来自哪个文件以及哪一行?显然需要用一些变量替换控制台.log但不确定如何实现?
gulp.task('scripts', function() {
return gulp.src(['./js/script.js'])
.pipe(include())
.pipe(plumber(
//{errorHandler: errorScripts};
function() {
console.log('There was an issue compiling scripts');
this.emit('end');
}
))
.pipe(concat('script-dist.js'))
//.pipe(stripDebug())
//.pipe(jshint())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
样式未运行答案:
运行default
任务时,不会编译样式,因为您这样做:
gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
基本上,您在这里所做的是用新任务覆盖default
任务。
这可以通过结合两者轻松克服:
gulp.task('default', ['scripts', 'styles', 'watch']);
控制台答案中的错误通知:
您应该在连接之前执行 jshinting,否则您将在连接文件(script-dist.js)上出现错误。您应该将 gulpfile 更改为:
gulp.task('scripts', function() {
return gulp.src(['./js/script.js'])
.pipe(include())
.pipe(plumber(
//{errorHandler: errorScripts};
function() {
console.log('There was an issue compiling scripts');
this.emit('end');
}
))
.pipe(jshint())
.pipe(concat('script-dist.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
这应该可以解决问题;-)
相关文章:
- 使用Gulp手柄部分编译为单个HTML文件
- 如何使用Gulp在子目录中编译JS
- 如何使用Gulp编译并移动到另一个文件夹一堆sass文件
- Gulp 4 TypeScript编译错误
- Gulp.js 在 LESS 文件中出现错误后,在观看时停止编译 LESS
- 如何使用 Gulp 将多个打字稿文件编译成一个 JavaScript 文件
- 使用 gulp 编译 TypeScript 会创建一个不需要的目标文件夹
- 与正常的“Gulp less”命令相比,“Gulp watch”事件编译所需的时间是普通“Gulp less”命令的两倍
- Gulp 不通知 JS 错误,也不在运行 gulp 时编译 scss 文件
- Gulp-重新编译一个颠簸的版本进行标记
- Gulp为多个html页面编译手柄
- Gulpjs – gulp-jade 编译问题
- gulp autoprefixer编译为.scss而非.css
- Gulp-sass编译在启动时工作正常.但是,更改后的文件将被排除在外
- 用GULP编译SASS和SUSY
- Gulp Livereload在所有文件都已编译之后
- 在ES6中使用Gulp编译React时出现语法错误
- Gulp不是'当文件更改时,t编译我的sass
- 如何使用Gulp和Babelify (Babel + Browserify)编译单例和类
- 使用Gulp编译javascript并解析依赖项(单独的文件)