Я импортирую bootstrap в моем основном файле s css, чтобы использовать переменные и точки останова из bootstrap в моих собственных файлах s css.
Это отлично работает, но каждое изменение я сохраняю компиляция занимает около 3 секунд, когда я компилирую без включения bootstrap, это занимает 99 мс.
Есть ли способ разрешить gulp не компилировать bootstrap каждый раз, когда я делаю изменения и все еще используете все переменные? (Bootstrap не меняется в любом случае)
Мой основной s css thar импортирует весь мой код s css выглядит следующим образом
@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
);