Start gulp using npm scripts

Hello

I want to create a script in my package.json file called ‘prod’. When I launch the script in npm I want it to build the project for production (minify css and not generate sourcemaps). The current code kind of does it already but I have to save the file first because Gulp is watching for changes. What I want is to build the project using npm run prod without having to save first (ctrl + s).

How do I do that ?

Thanks

{
  "name": "gulpy-2",
  "version": "1.0.0",
  "description": "starter kit for projects",
  "main": "index.php",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prod": "gulp --production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8"
  }
}
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const autoPrefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const changed = require('gulp-changed');
const imageMin = require('gulp-imagemin');
const util = require('gulp-util');

console.log(util.env.production);

const config = {
  production: !!util.env.production
}

function style(){
 return gulp.src('./src/sass/**/*.scss')
  .pipe(sourceMaps.init({loadMaps: true}))
  .pipe(sass({
    outputStyle: 'expanded'
  }).on('error', sass.logError))
  .pipe(autoPrefixer('last 2 versions'))
  .pipe(concat('style.css'))
  .pipe(config.production ? cleanCSS() : util.noop())
  .pipe(config.production ? util.noop() : sourceMaps.write('.'))
  .pipe(gulp.dest('./dist/css'))
  .pipe(browserSync.stream())
}

function javaScript(){
  return gulp.src('./src/js/**/*.js')
    .pipe(concat('index.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'))
}

function imageMinFunction(){ 
  return gulp.src('./src/images/*')
    .pipe(changed('./dist/images/'))
    .pipe(imageMin([
      imageMin.gifsicle({interlaced: true}),
      imageMin.mozjpeg({quality: 75, progressive: true}),
      imageMin.optipng({optimizationLevel: 5}),
      imageMin.svgo({
        plugins: [
            {removeViewBox: true},
            {cleanupIDs: false}
        ]
       })
    ]))
    .pipe(gulp.dest('./dist/images'))
}

function watch(){
  browserSync.init({
    open: 'external',
    proxy: 'http://localhost/gulpy',
    port: 8080

  });
  gulp.watch('./src/sass/**/*.scss', style);
  gulp.watch('./src/images/*', imageMinFunction);
  gulp.watch('./**/*.php').on('change', browserSync.reload);
  gulp.watch('./src/js/**/*.js', javaScript).on('change', browserSync.reload);
  
}

exports.style = style;
exports.javaScript = javaScript;
exports.imageMinFunction = imageMinFunction;
exports.watch = watch;

var build = gulp.parallel(watch);
gulp.task('default', build);

I don’t know if you’d like this, but a very easy way is to open the file in an editor with autosave.

In VSCode, you can set autosave, and even the autosave rate.


I just googled gulp-autosave (you might give it a try on npm), and this post came out. That person is having exactly the opposite issue, and the reason is that he had VSCode autosave enabled. :laughing:

Hi,

I can’t find gulp autosave anywhere.
I don’t think that would solve the problem anyway.
Other developers should be able to grab the project and run it smoothly no matter their ide of choice.