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é.
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, 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 !
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
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 -v
pour 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 :)
Ok je vais regarder ça. Je les rajoutes dans variables utilisateur pour xxxxx ou dans variables systèmes ?
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 :/