Installer Gulp dans un projet

2018-12-19

Installer Gulp dans un projet

Gulp c'est quoi?

Gulp vous permet de rouler des taches automatisées. D'accord mais encore...

Lors de la création, du développement d'un projet vous utiliser des outils comme Sass ou LESS qui doivent être compilés. Vous voulez évidement minimiser vos css en un fichier, vous souhaitez rassembler tout vos js dans un seul fichier également et le minimiser !?

Et bien Gulp fait tout ceci pour vous et même plus, comme le traitement d’images ou la compilation en temps réel.

C’est HOT non ?

 

Installation

Je vais utiliser npm (NodeJS) pour installer Gulp, il vous faut donc l’installer au préalable si ce n’est pas déjà fait.

Allez à la racine de votre dossier pour commencer l’installation.

Note : Suivant votre configuration vous allez devoir utiliser les droits administrateurs pour pouvoir exécuter les commandes suivantes.

 

Installation de Gulp :

npm install gulp

Un dossier /node_modules a du se créer. Il contient les libraires requises pour l’utilisation de Gulp. Présentement il ne contient que Gulp lui-même.

 

Installation des librairies requises :

En fonction de vos préférences vous allez devoir choisir vos propres librairies pour par exemple utiliser LESS plutôt que Sass. Ici je fait mon tutoriel en utilisant Sass car c’est je le préfère a LESS par habitude et à cause de la syntaxe.

 

Ici je vais installer les librairies suivantes utile pour mon propre développement, vous pouvez trouver une liste ici (http://gulpjs.com/plugins/)

  • gulp-sass
  • gulp-minify-css
  • gulp-uglify
  • gulp-imagemin
  • gulp-rename
  • gulp-concat

npm install gulp-sass gulp-minify-css gulp-uglify gulp-imagemin gulp-rename gulp-concat

 

Création du fichier de taches

On doit maintenant créer le fichier gulpfile.js à la racine du projet. Ce fichier gèrera nos taches et contiendra les configs de ces taches justement.

 

Ci dessous mon fichier :

// Get modules
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat');

 

//Define Variable
var src_asset  = 'assets/';
var dest_asset = 'public/assets/';
var src_js     = src_asset + 'js/';
var dest_js    = dest_asset + 'js';
var src_scss   = src_asset + 'css/';
var dest_css   = dest_asset + 'css';
var src_img    = src_asset + 'images/';
var dest_img   = dest_asset + 'images';

 

gulp.task('sass', function () {
    gulp.src(src_scss + 'styles.scss')
        .pipe(sass())
        .pipe(minifycss())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(dest_css));
});

 

gulp.task('scripts', function() {
    gulp.src(src_js + '**/*.js')
        .pipe(uglify())
        .pipe(concat('main.js'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(dest_js));

});

 

gulp.task('images', function () {
    gulp.src(src_img + '**/*.{png,gif,jpg}')
        .pipe(imagemin())
        .pipe(gulp.dest(dest_img));
});

 

// The default task (called when you run `gulp` from cli)

gulp.task('default',  ['sass', 'scripts', 'images']);
gulp.task('less-img',  ['sass', 'scripts']);

 

gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch(src_scss + '**/*.scss', ['sass']);

  // Watch .js files
  gulp.watch(src_js + '**/*.js', ['scripts']);

  // Watch image files
  //gulp.watch('src/images/**/*', ['images']);
});

 

Explications rapides:

Dans un 1er temps, on load les libraries requises (celle-que l'on a installées)

var gulp = require('gulp')

Ensuite je me crée des variables afin de rester DRY

Puis je crée mes taches, ici j'ai 3 tâches principales qui vont gérer mes Sass, JS et Images. Je crée ensuite des taches "globales" qui reprennent les taches précédentes afin de regrouper ceci sous une seul et même commande.

On peux accéder â ces taches simplement en roulant la commande suivante:

gulp

Cette commande va, comme le montre le code gérer mes Sass, JS et Images. Les Images étant une étape assez lourde et vu que ca change moins souvent j'ai également créé la tache suivante qui permet de ne rouler que les Sass et les JS

gulp less-img

Maintenant la dernière tâche permet de rouler Gulp des que celui-ci vois qu'une modification a été faite sur un JS ou Sass, c'est vraiment cool et vous evite de devoir vous même rouler la commande à chaque changements.

gulp watch

 

Commentaires

Wednesday 19 December 2018 - Stas
Je recommande d'essayer Codelobster: http://www.codelobster.com