在 scss 中导入 bootstrap 会使任务变慢

Question

我正在我的主 scss 文件中导入 bootstrap，以便在我自己的 scss 文件中使用来自 bootstrap 的变量和断点。

这工作正常，但我保存的每个更改都需要大约 3 秒的时间来编译，当我在没有 bootstrap 包含的情况下编译它时，它需要 99 毫秒。

有没有办法让 gulp 不编译 bootstrap 每次我进行更改并仍然使用所有变量？（Bootstrap 无论如何都没有改变）

我的主要 scss 导入了我所有的 scss 代码，如下所示

@import "assets/colors";
@import "assets/fonts";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "assets/buttons";
@import "elements/header/header";
@import "elements/header/header-usp";
@import "elements/header/nav";
@import "elements/main-content.scss";

我的gulpfile.js看起来像这样

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
var replace = require('gulp-replace');


// File paths
const files = { 
    scssPath: 'assets/style/sass/**/*.scss',
    jsPath: 'assets/scripts/**/*.js',
    distCssPath: 'assets/dist/css',
    distScriptsPath: 'assets/dist/scripts'
}

// Sass task: compiles the style.scss file into style.css
function scssTask(){    
    return src(files.scssPath)
        .pipe(sourcemaps.init()) // initialize sourcemaps first
        .pipe(sass()) // compile SCSS to CSS
        .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
        .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
        .pipe(dest(files.distCssPath)
    ); // put final CSS in site/templates/dist folder
}

// JS task: concatenates and uglifies JS files to script.js
function jsTask(){
    return src([
        files.jsPath
        //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
        ])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest(files.distScriptsPath)
    );
}

// Cachebust
var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
        .pipe(dest('.'));
}

// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
    watch([files.scssPath, files.jsPath], 
        series(
            parallel(scssTask, jsTask)
        )
    );    
}

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
    parallel(scssTask, jsTask), 
    watchTask
);

Answer 1

你可以临时移除.pipe(postcss([ autoprefixer(), cssnano() ]))来快速编译

Answer 2

不是导入整个 bootstrap，而是每次都重新编译，您只能导入 var 文件：@import "../../../node_modules/bootstrap/scss/variables";

Answer 3

最后我在@ekans 的帮助下修复了它我只需要导入必要的文件所以我的新导入看起来像这样并且只需要 +- 100MS

@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins/breakpoints";

在 scss 中导入 bootstrap 会使任务变慢

Importing bootstrap in scss makes task slow

sass

twitter-bootstrap

gulp