Question

这是我的gulpfile.js，但我遇到了2个问题。

1）在Sass的每一个错误中（例如我在设置之前保存变量），观察者停止并且我需要再次启动它。有可能解决这个问题吗？ 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')
}

编辑：我的项目文件：this

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'的位置 - 您需要在此处写下源文件夹的路径。

监视任务没有任何依赖关系，因此请删除[ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ]。

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

要自定义引导程序块，您可以覆盖引导程序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

我不会解释，因为如果你只看到我的图像，你会清晰。

此外，您将在控制台
中收到 scss / sass错误

快乐编程！

我使用 Gulp + 浏览器同步 + gulp-sass

仅此 3 包

Answer 3

您可以使用gulp-plumber来捕获错误。将this.emit('end');添加到handleError功能以保持手表正常运行

Here's an article that covers it

Gulp - 不编译所有Sass文件并停止Sass错误

3 个答案: