gulp
Utiliser des filtres de fichiers.

Création d'images, règles JS et CSS (SASS) pour la commande de fichiers

Installer Gulp et ses tâches

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

Détermination de la structure des dossiers

Dans cette structure, nous utiliserons le dossier app à des fins de développement, tandis que le dossier dist est utilisé pour contenir des fichiers optimisés pour le site de production.

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

Prétraitement Gulp

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

Tâche Gulp

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

Montre gulp

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() {});