我希望我的 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);

1. 我有两个任务要用来缩小 CSS 和图像文件。我现在已将它们注释掉，以便我可以处理该项目。

2. 我尝试在 scsstask 中使用 CSSo()，但没有任何反应。

3. 我还尝试使用 gulp-rename（在 cssMinifyTask() 内部）以 .min 扩展名 (main.min.css) 命名我的 main.css 文件，但它进入了无限和所以我把它拿出来了。

4. 我真的不需要地图，如果我不需要使用它，我宁愿不使用。

5. imageminTask() 似乎一直在运行，并且不会在我的 dist 目标中生成任何新文件。

这是我设置的文件夹。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）