Gulp

Question

这是我的 gulpfile.js，但我有 2 个问题。

1) 对于 Sass 的每个错误（例如，我在设置之前保存变量），watcher 停止，我需要重新启动它。可以解决这个问题吗？
2) Sass 编译未获取所有文件更改。这里有什么不好？

var gulp = require('gulp');
var sass = require('gulp-sass');
// var imagemin = require('gulp-imagemin');
var rename = require("gulp-rename");
var runSequence = require('run-sequence');
var browserSync = require('browser-sync').create();

/**
 * **********************
 * Developer Taks
 * **********************
 */
gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: 'public'
        },
    })
});

/*
 *  Bootstrap Sass
 * * * * * * * * * * *
 */
gulp.task( 'bootstrap-sass', function(){
    return gulp.src( 'dev/sass/bootstrap.scss' )
        .pipe( sass() )
        .pipe( rename( 'bootstrap.min.css' ) )
        .pipe( gulp.dest( 'public/assets/plugins/bootstrap/css' ) )
        .on('error', swallowError)
        .pipe( browserSync.reload({
            stream: true
        }))
});

/*
 *  Kopiowanie Bootstrap JS
 * * * * * * * * * * *
 */
gulp.task( 'copy-boostrap-js', function() {
    gulp.src( 'dev/js/bootstrap.js' )
    .pipe( rename( 'bootstrap.min.js' ) )
    .pipe( gulp.dest( 'public/assets/plugins/bootstrap/js' ) );
});

/*
 *  Główny Sass
 * * * * * * * * * * *
 */
gulp.task( 'global-sass', function(){
    return gulp.src( 'dev/sass/**/*.scss' )
        .pipe( sass() )
        .pipe( gulp.dest( 'public/assets/css' ) )
        .on('error', swallowError)
        .pipe( browserSync.reload({
            stream: true
        }))
});

/**
 * **********************
 * Production Taks
 * **********************
 */

/*
 *  Kopiowanie FullPage
 * * * * * * * * * * *
 */
gulp.task( 'copy-fullpage', function() {
    gulp.src( 'dev/components/fullpage.js/dist/jquery.fullpage.min.css' )
    .pipe( rename( 'fullpage.min.css' ) )
    .pipe( gulp.dest( 'public/assets/plugins/fullpage/css' ) );

    gulp.src( 'dev/components/fullpage.js/dist/jquery.fullpage.min.js' )
    .pipe( rename( 'fullpage.min.js' ) )
    .pipe( gulp.dest( 'public/assets/plugins/fullpage/js' ) );
});

/*
 *  Kopiowanie Swiper
 * * * * * * * * * * *
 */
gulp.task( 'copy-swiper', function() {
    gulp.src( 'dev/components/Swiper/dist/css/swiper.min.css' )
    .pipe( gulp.dest( 'public/assets/plugins/swiper/css' ) );

    gulp.src( 'dev/components/Swiper/dist/js/swiper.min.js' )
    .pipe( gulp.dest( 'public/assets/plugins/swiper/js' ) );
});

/**
 * ==================================================================================
 * ==================================================================================
 */

/**
 * Watch developer tasks
 *      gulp watch
 */                 // 
gulp.task( 'watch', [ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ], function () {
    /* Bootstrap */
    gulp.watch( 'dev/js/bootstrap.js', [ 'copy-boostrap-js' ] ); 
    gulp.watch( 'dev/sass/bootstrap.scss', [ 'bootstrap-sass' ] ); 
    /* Main Sass */
    gulp.watch( 'dev/sass/**/*.scss', [ 'global-sass' ] ); 
    gulp.watch( 'public/*.html', browserSync.reload );
});

/**
 * Execute production tasks
 *      gulp build
 */
gulp.task( 'build', function() {
    runSequence(
        [ 'copy-fullpage', 'copy-swiper' ]
    )
});


function swallowError (error) {

  // If you want details of the error in the console
  console.log(error.toString())

  this.emit('end')
}

编辑： 我的项目文件：https://mega.nz/#!W9Jm3ZKJ!oeGu9sTtLUKZ3bs4L0zv3ysFaOGs7ARIckGJZ0tRMzQ

Answer 1

您需要两个任务来构建 scss 和监视文件。

Build scss:

gulp.task('style:build', function () {
    gulp.src(path.src.style)
        .pipe(sass({errLogToConsole: true}))
        .pipe(cssmin())
        .pipe(gulp.dest(path.build.css));
});

您需要的字符串 - {errLogToConsole: true} - 向控制台显示错误而不是完成工作。

观看 task:

gulp.task('watch', function () {
    watch([path.watch.style], function (event, cb) {
        gulp.start('style:build');
    });
});

其中 path.watch.style 是 'src/style/**/*.scss' - 您需要在此处写入源文件夹的路径。

Watch 任务没有任何依赖，所以删除 [ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ].

P.S。删除 gulp.watch( 'dev/sass/bootstrap.scss', [ 'bootstrap-sass' ] );。您不必更改框架文件中的任何内容。这是不好的做法。

要自定义 bootstrap 块，您可以覆盖 bootstrap variables（如果您希望所有按钮都有 font-weight: bold;，您应该覆盖 $btn-font-weight 变量）。
因此，首先使用默认变量导入文件。然后使用您自己的变量导入文件。最后导入你真正需要的块，例如 navbar 或 greed。

您的主 scss 文件可能如下所示：

@import "../bootstrap/scss/variables.scss"; 
@import "variables.scss"; // Put your custom variables in here 

@import "../bootstrap/scss/mixins.scss";

// Add navbar and greed from bootstrap
@import "../bootstrap/scss/navbar.scss"; 
@import "../bootstrap/scss/grid.scss";

// Add custom files here
@import 'custom.scss';
@import 'header.scss';

在 Joseph Fitzsimmons 中找到的主要文件示例 article。

Answer 2

您可以使用 gulp-plumber 来捕获错误。在handleError函数中添加this.emit('end');，保持手表运行

Here's an article that covers it

Answer 3

我就不解释了，你会crystal清楚如果你只看我的图片。

Also You will get the scss/sass error in console

编程愉快！

我用了Gulp + Browser-sync + gulp-sass

只有这个3包

Gulp - 不编译所有 Sass 文件并在出现 Sass 错误时停止

Gulp - not compile all Sass files and stops on Sass error

css

sass

gulp-sass

gulp-watch