gulp - I would like my gulpfile.js to minify my CSS and Images

Question

Here is my package.json file

    {
   "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"
   }
}

Here is my 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, cssMinifyTask,  taken out for now
exports.default = series(scssTask, watchTask);

1. I have two tasks that I would like to use to minify the CSS and Image files. I have them commented out for now so I can work on the project.

2. I tried using the csso() in the scssTask, but nothing happens.

3. I also tried to use the gulp-rename (inside of the cssMinifyTask()) to name my main.css file with the .min extension (main.min.css), but it went into an infinite and so I took it out.

4. I don't really need a map, and if I do not have to use it, I would prefer not to.

5. the imageminTask() seems to run and run and doesn't produce any new files within my dist destination.

Here is my folder set up.

question from:https://stackoverflow.com/questions/65865395/i-would-like-my-gulpfile-js-to-minify-my-css-and-images

Answer 1

Waitting for answers