Utiliser Gulp.js et PhpStorm ou Intellij IDEA

Gulp phpstormIl vous est proposé ici un tutoriel pour utiliser Gulp et Phpstorm ou  Intellij IDEA afin de démarrer un projet rapidement en les pré-programmant. Ce tutoriel sera basé sur Unix, mais bien sur adaptable sur d’autres OS.

Phpstorm intègre déjà Gulp dans Run/Debug Configurations.

Gulp, afin de l’utiliser pour tous les projets, je l’ai installé dans /usr/local/node_modules/gulp, ainsi que le fichier gulpfile.js ainsi que toutes les dépendances dont j’aurai besoin ci-dessous une commande globale d’indépendances en exemple Celle que j’utilise entre autres :

npm install gulp-ruby-sass gulp-sass gulp-autoprefixer gulp-minify-css gulp-plumber gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-cache del –save-dev

 Ainsi dans la configuration de la fenêtre Run/Debug Configurations :

Gulpfile : /usr/local/node_modules/gulpfile.js

Tasks : watch (j’ai programmé cette fonction pourqu’elle scanne en permanence tout changement de fichier pré-défini)

Node interpreter : /usr/local/bin/node

Gulp package : /usr/local/node_modules/gulp (Ce qui a été installé précédemment)

Environment : Variables qui seront utilisé pour l’injecter dans le fichier gulp.js. Ces variables seront à changés à chaque projet.

Exemple d’utilisation :

PATH_SITE -> /Users/{user}/Sites/webproject/
SERVER_SITE -> http://webproject.dev
PORT -> 3000 (Utiliser pour browsersync)

Dans le fichier gulpfile.js :

// Gulp
var gulp = require('gulp');
var path_site = process.env.PATH_SITE || '/Users/{user}/Sites/';
var server_site = process.env.SERVER_SITE || 'local.dev';
var server_port = process.env.PORT || '3000';
console.log('PATH Site: '+process.env.PATH_SITE+'\nSERVER Site: '+process.env.SERVER_SITE);
// pour vérifier si les données sont exactes en exécutant Gulp avec Phpstorm

Ici, nous réutilisons les variables d’environment envoyé par PhpStorm pour modifier des variables dans Gulpfile.js

Ainsi, dans la fenêtre Run/Debug Configurations, nous cliquerons sur « Share », et ainsi dans un nouveau projet, nous pourrons récupérer dans le dossier .idea -> runConfigurations -> GulpConfig.xml et modifier si nous le souhaitons le fichier xml directement et lancer ou relancer PhpStorm.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>