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 :

  • compiler le scss en css
  • minifier et compresser le tout
  • optimiser mes images
  • prefixer mon css
  • synchronizer mon navigateur pour avoir un livereload aux modifications (js,html,css)

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


betaWeb
Réponse acceptée

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
Auteur
Réponse acceptée

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 :)

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

Dans les variables utilisateur ;)

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 :/