Start gulp using npm scripts


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 ?


  "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');


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

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

function javaScript(){
  return gulp.src('./src/js/**/*.js')

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

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

  });'./src/sass/**/*.scss', style);'./src/images/*', imageMinFunction);'./**/*.php').on('change', browserSync.reload);'./src/js/**/*.js', javaScript).on('change', browserSync.reload);
} = style;
exports.javaScript = javaScript;
exports.imageMinFunction = imageMinFunction; = 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:


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.