0

scss と JS のコンパイル時にエラーが発生したときに通知するように、標準の gulpfile を改善しようとしています。

SCSSの問題

私はそれを SCSS で動作させています。端末でエラーをスローし、ノイズを発生させ、gulp の実行を停止しません。これは素晴らしいことです。

不思議なことに、私のスタイルは を実行したときにコンパイルされていましたgulpが、今では .scss ファイルの 1 つを保存して 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エラーを端末に接続することができましたが、エラーが実際に何であるか、エラーが発生しているファイルと行を報告する方法がわかりませんか? 明らかに、console.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());
});
4

1 に答える 1

0

答えを実行していないスタイル:

タスクを実行するdefaultと、スタイルはコンパイルされません。これは、次のことを行うためです。

gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);

基本的に、ここで行っていることは、defaultタスクを新しいタスクで上書きすることです。

これは、次の 2 つを組み合わせることで簡単に克服できます。

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());
});

それはトリックを行う必要があります;-)

于 2016-01-18T09:03:46.567 に答える