gulp
Utilizzo dei filtri di file.

Creazione di regole Images, JS e CSS (SASS) per ordinare i file

Installazione di Gulp e dei suoi compiti

$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev
$ npm install gulp-uglify --save-dev
$ npm install gulp-imagemin --save-dev

Determinazione della struttura delle cartelle

In questa struttura, utilizzeremo la cartella dell'app per scopi di sviluppo, mentre la cartella dist viene utilizzata per contenere file ottimizzati per il sito di produzione.

|-app
    |-css/
    |-images/
    |-index.html
    |-js/
    |-scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json

Preprocessing di Gulp

// Requires the gulp-sass plugin
var gulp = require('gulp'); 
    sass = require('gulp-sass');
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');

Gulp Task

gulp.task('sass', function(){
  return gulp.src('app/scss/**/*.scss') //selection all files in this derectory
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('dist'))
});
gulp.task('gulp-uglify', function(){
  return gulp.src('app/js/*.js')
    // Minifies only if it's a JavaScript file
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});
gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/images'))
});

Gulp Watch

gulp.task('watch', function(){
  gulp.watch('app/js/**/*.js', ['gulp-uglify']); 
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/images/**/*.*', ['images']);  
  // Other watchers
});
gulp.task('build', [`sass`, `gulp-uglify`, `images`], function (){
  console.log('Building files');
});
gulp.task('default', function() {});