Gulp

Che cos’è un task runner?

Un task runner consente di automatizzare compiti complessi limitando gli interventi manuali.

Gulp compie elaborazioni su file, siano essi testi, codice oppure immagini. Ogni elaborazione viene gestita da un plugin, quindi più plugin abbiamo e più operazioni possiamo fare.

Gulp sfrutta il concetto di stream (o pipeline), dove l'output di un operazione, diventa l'input della successiva.

Installazione

npm install -g gulp

gulp --version

Un esempio

// Cartella del museo
npm init

npm install gulp --save-dev

Gulpfile.js

Per lavorare con gulp, bisogna preparare il file di configurazione che ci permetta di eseguire le operazioni che vogliamo eseguire.

// Gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
	console.log('Gulp è un task manager coi fiocchi!');
});

Plugins e librerie per Sass

npm install --save-dev gulp-sass

npm install --save-dev gulp-minify-css

npm install --save-dev gulp-rename

npm install --save-dev gulp-notify

npm install --save bootstrap-sass

Configurazione per Sass

var gulp      = require('gulp'),
    sass      = require('gulp-sass'),
    minifycss = require('gulp-minify-css'),
    rename    = require('gulp-rename'),
    notify    = require('gulp-notify');

let sassConfig = {
	in: './scss/style.scss',
	out: './dist/css/',
	watch: './scss/**/*',
	sassOpts: {
		//outputStyle: 'compressed',
		precision: 3,
		errLogToConsole: true,
		includePaths: [
			'./node_modules/bootstrap-sass/assets/stylesheets'
		]
	}
};

gulp.task('styles', function() {
	return gulp.src(sassConfig.in)
		.pipe(sass(sassConfig.sassOpts))
		.pipe(gulp.dest(sassConfig.out))
		.pipe(rename({ suffix: '.min' }))
		.pipe(minifycss())
		.pipe(gulp.dest(sassConfig.out))
		.pipe(notify({ message: 'Style task complete' }));
});

Watcher

Con il task di watch, possiamo tenere degli ascoltatori su determinate cartelle che ci permettono di lavorare e in automatico gulp effettuerà l'esecuzione dei vari task.

gulp.task('watch', function() {

    // Watch .scss files
    gulp.watch('scss/**/*.scss', gulp.series('styles') );

});

Plugins e librerie per JS

npm install --save-dev gulp-plumber

npm install --save-dev gulp-concat

npm install --save-dev gulp-uglify

npm install --save jquery

Configurazione per JavaScript

var gulp      = require('gulp'),
    sass      = require('gulp-sass'),
    minifycss = require('gulp-minify-css'),
    rename    = require('gulp-rename'),
    notify    = require('gulp-notify'),

    plumber   = require('gulp-plumber'),
    concat    = require('gulp-concat'),
    uglify    = require('gulp-uglify');


var paths = {
	'bootstrap':     './node_modules/bootstrap-sass/assets/',
	'jquery':        './node_modules/jquery/'
};

var onError = function (err) {
	console.log(err);
	this.emit('end');
};

gulp.task('scripts', function() {
	return gulp.src([
		paths.jquery + 'dist/jquery.js',
		paths.bootstrap + 'javascripts/bootstrap.js',
		'./js/main.js'
	])
		.pipe(plumber({ errorHandler: onError }))
		.pipe(concat('main.js'))
		.pipe(gulp.dest('./dist/js'))
		.pipe(rename({ suffix: '.min' }))
		.pipe(uglify())
		.pipe(gulp.dest('./dist/js'))
		.pipe(notify({ message: 'Scripts task complete' }));
});

Aggiorniamo il watcher

gulp.task('watch', function() {

    // Watch .scss files
    gulp.watch('scss/**/*.scss', gulp.series('styles') );

    // Watch .js files
    gulp.watch('./js/**/*.js', gulp.series('scripts') );

});

Livereload

var server = require('gulp-server-livereload')

gulp.task('watch', function() {

    gulp.src('./')
        .pipe(server({
                livereload: true,
                directoryListing: true,
                open: true
            }));

    // [...]
});

Con il plugin livereload possiamo effettuare modifiche al codice sorgente e queste verranno immediatamente riflesse nel nostro browser.

Per farlo, usiamo un plugin di Chrome e modifichiamo il watcher.

npm install --save-dev gulp-server-livereload