Source : http://makina-corpus.com/blog/metier/2015/utiliser-bootstrap-avec-un-pre-processeur Installation de node.js > sudo apt-get update > sudo apt-get install nodejs npm #Création de 2 liens symboliques (optionnel) > sudo ln -s /usr/bin/nodejs /usr/local/bin/node > sudo ln -s /usr/bin/npm /usr/local/bin/npm Installation de node-sass > sudo npm install -g node-sass Tests : Créer un fichier test.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } Commande > node-sass test.scss style.css → Un fichier style.css vient d'être créé Commandes : Compiler à la volée : > node-sass --watch test.scss style.css → va tracker les changements sur le fichier .scss Installer Ruby : > sudo apt-get install ruby-full → On peut maintenant utiliser la commande gem Installation de l'environnement Ruby : > gem update --system # Installation de compass > gem install compass # Installation de Bootstrap avec compass > gem install bootstrap-sass # Commencer un nouveau projet Bootstrap-Sass > compass create my-new-project -r bootstrap-sass --using bootstrap Créer le fichier index.html qui appelle la feuille de style. Lancer l'espion compass : > compass watch Installer git > apt-get install git-all Il est parfois nécessaire de changer les droits : sudo chown -R $USER:$GROUP ~/.npm sudo chown -R $USER:$GROUP ~/.config Installer bower > npm install -g bower Installer bootstrap-sass > bower install bootstrap-sass Créer un répertoire projet > mkdir bs01 Créer un fichier .bowerrc : { "directory": "bower-components/", "json": "bower.json" } > bower init → génération de bower.json > npm init → génération de package.json (dépendence du projet) > npm install gulp -g --save-dev → met à jour le fichier package.json > npm install gulp-sass --save-dev → module sass > npm install gulp-util --save-dev → module qui permet afficher messages formatés > npm install gulp-rename --save-dev → module qui permet de renommer facilement des fichiers > npm install gulp-livereload --save-dev → module qui permet → important : il faut ajouter à package.json "private": true, pour éviter de spécifier une adresse de repository → important : j'ai eu un soucis d'install, j'ai dû faire un npm unlink gulp et réinstaller 'gulp-livereload' pour que ça fonctionne, ensuite refaire link > npm link gulp → lier gulp localement (au cas où, moi j'ai dû le faire) > npm cache clean → au cas où /***** Pour installer le projet autre part *****/ Pas besoin de "bower_components" Pas besoin de "node_modules" Pas besoin des fichiers générés de production contenus dans "web" > bower install # va utiliser la configuration de bower.json > npm link gulp # lier gulp à mon projet > npm -g install # va utiliser la configuration de package.json > gulp prod # va lancer le script qu'on a créé /***** Tester gulp en créant un gulpfile.js *****/ var gulp = require('gulp'); var gutil = require('gulp-util'); gulp.task('test', function() { return gutil.log(gutil.colors.yellow('bonjour')) }); → retourne Bonjour en jaune /**********************************************************************************************/ /*** other commands ***/ /**********************************************************************************************/ > npm unlink [x] > npm list links > npm ls > npm i -g gulp → avoir la commande gulp sur le système > npm -v gulp → donne la version du module gulp > npm cache clean → vide le cache