问题描述
如果我不处理 main.scss 并且处理例如由 main.scss 导入的 variables.scss,则每次需要重新保存 main.scss 文件以应用 variables.scss 更改。如何解决这个问题?我需要在保存任何 scss 导入文件时自动应用更改。
这是我的 gulp 文件,提前致谢
const { src,dest,parallel,series,watch } = require('gulp');
// Load plugins
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const clean = require('gulp-clean');
const imagemin = require('gulp-imagemin');
const changed = require('gulp-changed');
const browsersync = require('browser-sync').create();
const htmlmin = require('gulp-htmlmin');
const webp = require('gulp-webp');
// browserSync
const PORT = 3000;
// Directories
const DEST = './dist/';
const DEST_JS = `${DEST}js/`;
const DEST_CSS = `${DEST}css/`;
const DEST_IMG = `${DEST}img/`;
const DEST_FONT = `${DEST_CSS}font/`;
const SRC = './src/';
const SRC_JS = `${SRC}js/`;
const SRC_CSS = `${SRC}scss/*main.scss`;
const SRC_IMG = `${SRC}img/`;
const SRC_FONT = `${SRC}scss/font/`;
// Clean assets
function clear() {
return src(`${DEST}/*`,{
read: false,}).pipe(clean({ force: true }));
}
//font function
function font() {
return src(`${SRC_FONT}*`).pipe(dest(DEST_FONT));
}
// html function
function html() {
const source = `${SRC}*.html`;
return src(source)
.pipe(changed(source))
.pipe(htmlmin({ collapseWhitespace: true,removeComments: true }))
.pipe(dest(DEST))
.pipe(browsersync.stream());
}
// JS function
function js() {
const source = `${SRC_JS}*.js`;
return src(source)
.pipe(changed(source))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(
rename({
extname: '.min.js',}),)
.pipe(dest(DEST_JS))
.pipe(browsersync.stream());
}
// CSS function
function css() {
const source = SRC_CSS;
return src(source)
.pipe(changed(source))
.pipe(
sass({
includePaths: ['node_modules'],)
.pipe(
autoprefixer({
overridebrowserslist: ['last 2 versions'],cascade: false,)
.pipe(
rename({
extname: '.min.css',)
.pipe(cssnano())
.pipe(dest(DEST_CSS))
.pipe(browsersync.stream());
}
// Optimize images
function img() {
return src(`${SRC_IMG}*`)
.pipe(webp())
.pipe(imagemin())
.pipe(dest(DEST_IMG));
}
// copy Favicon.ico
function favico(){
return src(`${SRC}*.ico`)
.pipe(dest(DEST));
}
// Watch files
function watchFiles() {
watch(`${SRC_CSS}*`,css);
watch(`${SRC_JS}*`,js);
watch(`${SRC_IMG}*`,img);
watch(`${SRC}*.html`,html);
watch(`${SRC_FONT}*`,font);
watch(`${SRC}*.ico`,favico);
watch( `${SRC}lang`,html)
}
// browserSync
function browserSync() {
browsersync.init({
server: {
baseDir: DEST,},port: PORT,});
}
// Tasks to define the execution of the functions simultaneously or in series
exports.watch = series(clear,parallel(js,css,img,html,font,favico,watchFiles,browserSync));
exports.default = series(clear,favico));
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)