如何解决我希望我的 gulpfile.js 能够缩小我的 CSS 和图像
这是我的 package.json 文件
{
"name": "pet-shop-frontend","version": "1.0.0","description": "Webucator Final Project","main": "gulpfile.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},"keywords": [],"author": "Alix Field","license": "ISC","dependencies": {
"gulp-update": "0.0.2","node-sass": "^5.0.0"
},"devDependencies": {
"browser-sync": "^2.26.13","gulp": "^6.14.4","gulp-autoprefixer": "^7.0.1","gulp-csso": "^4.0.1","gulp-imagemin": "^7.1.0","gulp-load-plugins": "^2.0.5","gulp-rename": "^2.0.0","gulp-sass": "^4.1.0","gulp-sequence": "^1.0.0","gulp-sourcemaps": "^3.0.0","gulp-watch": "^5.0.1"
}
}
这是我的 gulpfile.js
// Initialize modules & Importing specific gulp API functions
const { src,dest,watch,series,parallel,on } = require('gulp');
const sass = require('gulp-sass');
const gulpLoadplugins = require('gulp-load-plugins'),plugins = gulpLoadplugins();
sass.compiler = require('node-sass');
// File paths
const files = {
scsspath: 'static/scss/**/*.scss',imgPath: 'static/images/**/*.png',csspath: 'dist/css/**/*.css',}
// Sass task: compiles the main.scss file into main.css
function scsstask() {
return src(files.scsspath)
.pipe(plugins.sourcemaps.init()) // initialize sourcemaps first
.pipe(sass().on('error',sass.logError))
.pipe(plugins.autoprefixer())
.pipe(plugins.csso())
.pipe(plugins.sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(dest('dist/css')) // put final CSS in dist folder
};
// function imageminTask() {
// return src(files.imgPath)
// .pipe(plugins.imagemin())
// .pipe(dest('dist/img'));
// };
// function cssMinifyTask() {
// return src(files.csspath)
// .pipe(plugins.csso())
// .pipe(dest('dist/css'));
// }
/*----------- No JS Files at this time -----------*/
// Watch task: watch SCSS and JS files for changes
// If any change,run scss and js tasks simultaneously
function watchTask() {
watch([files.scsspath],{ interval: 1000,usePolling: true },//Makes docker work
series(
//imageminTask,cssMinifyTask,taken out for Now
parallel(scsstask)
)
);
}
// Export the default Gulp task so it can be run
//imageminTask,taken out for Now
exports.default = series(scsstask,watchTask);
-
我尝试在 scsstask 中使用 CSSo(),但没有任何反应。
-
我还尝试使用 gulp-rename(在 cssMinifyTask() 内部)以 .min 扩展名 (main.min.css) 命名我的 main.css 文件,但它进入了无限和所以我把它拿出来了。
-
我真的不需要地图,如果我不需要使用它,我宁愿不使用。
这是我设置的文件夹。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。