gulp & node-ass

Par Benjamin Derepas, il y a 10 ans

Les bases HTML/CSS

Bonjour,

N'ayant jamais été un grand fan de la CLI, j'ai travaillé pendant longtemps avec l'app Prepos pour compiler, minifier, synchronizer mon workflow. Mais je voudrai maintenant passer à Gulp, alors après avoir regarder le tuto de Graf, et divers articles sur la toile, je me suis lancé.

Mon workflow

J'ai installer gulp ainsi que divers plugins pour :

Mais voilà, lorsque j'installe mes dépendances, et que je lance ma task principale, Node me dit qu'il ne trouve pas le module node-sass.
J'ai utilisé le site quenchjs pour générer mon gulpfile.

Et voilà le package.json que j'ai :

{ "name": "Quench", "version": "1.0.0", "description": "A Gulp file and project generator.", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Quench", "license": "ISC", "devDependencies": { "browser-sync": "2.6.5", "gulp": "3.8.11", "gulp-autoprefixer": "2.1.0", "gulp-cache": "0.2.8", "gulp-concat": "2.5.2", "gulp-imagemin": "2.2.1", "gulp-jshint": "1.10.0", "gulp-minify-css": "1.0.0", "gulp-plumber": "1.0.0", "gulp-rename": "1.2.2", "gulp-sass": "1.3.3", "gulp-uglify": "1.2.0", "node-sass": "^3.4.2" } }

Mon erreur lorsque je lance gulp (il prend la task par défaut) :

throw new Error('libsass bindings not found. Try reinstalling node-sass?')
Error: libsass bindings not found. Try reinstalling node-sass?

Et le contenu de mon fichier gulpfile :

var gulp = require('gulp'), plumber = require('gulp-plumber'), rename = require('gulp-rename'); var autoprefixer = require('gulp-autoprefixer'); var concat = require('gulp-concat'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); var imagemin = require('gulp-imagemin'), cache = require('gulp-cache'); var minifycss = require('gulp-minify-css'); var sass = require('gulp-sass'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); }); gulp.task('bs-reload', function () { browserSync.reload(); }); gulp.task('images', function(){ gulp.src('img/**/*') .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(gulp.dest('img/')); }); gulp.task('styles', function(){ gulp.src(['scss/**/*.scss']) .pipe(plumber({ errorHandler: function (error) { console.log(error.message); this.emit('end'); }})) .pipe(sass()) .pipe(autoprefixer('last 2 versions')) .pipe(gulp.dest('css/')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('css/')) .pipe(browserSync.reload({stream:true})) }); gulp.task('scripts', function(){ return gulp.src('js/**/*.js') .pipe(plumber({ errorHandler: function (error) { console.log(error.message); this.emit('end'); }})) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('main.js')) .pipe(gulp.dest('js/')) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('js/')) .pipe(browserSync.reload({stream:true})) }); gulp.task('default', ['browser-sync'], function(){ gulp.watch("scss/**/*.scss", ['styles']); gulp.watch("js/**/*.js", ['scripts']); gulp.watch("*.html", ['bs-reload']); });

Et donc ?

Et donc, j'ai beau cherché, installer node-sass, gulp-sass et tout le tralala, je ne comprend pas d'où viens cette erreur.
Lorsque d'ailleurs j'ai installé node-sass, npm ne me sort aucune erreur, et l'ajoute bien aux dev dependencies. Mais lorsque je veux compiler, j'ai toujours cette erreur avec node-sass et lib-sass .

Auriez vous une piste à me donner stp ? Je desespère, je vais devoir retourner sur Prepos !

5 réponses

Benjamin Derepas, il y a 10 ans

It works

J'ai trouvé la solution, je la partage pour ceux qui auraient le même problème que moi à l'avenir :
Si vous utilisez une version de node supérieur à 4.x (node -vpour savoir), vous devez desinstaller *gulp-sass et installer la version 2 :

npm uninstall --save-dev gulp-sass npm install --save-dev gulp-sass@2

Merci @betaWeb pour les indications :)

betaWeb, il y a 10 ans

Salut,

Tu travailles sur Windows ? Si oui, il faut ajouter npm et NodeJS à ton PATH dans tes variables d'env. (clic droit sur l'icône Windows -> Système -> Paramètres système avancées -> Variables d'environnement) :

// A toi d'adapter les path %USERPROFILE%\AppData\Roaming\npm C:\Program Files (x86)\nodejs
Benjamin Derepas, il y a 10 ans

Ok je vais regarder ça. Je les rajoutes dans variables utilisateur pour xxxxx ou dans variables systèmes ?

betaWeb, il y a 10 ans

Dans les variables utilisateur ;)

Benjamin Derepas, il y a 10 ans

Je viens de vérifier, le path node était présent, j'ai rajouter celui de npm (C:\Program Files\nodejs\node_modules\npm\bin), relancer l'invite de commande, mais j'ai toujours cette erreur :/