Gulp.js avec fondation / boussole

voix
5

Quelqu'un at-il Gulp-de SASS obtenu avec succès à travailler avec la fondation 4/5 (avec boussole de préférence?)

L'application utilise base 4 avec succès, sans gulp, en utilisant compass watch. Mais je veux commencer à utiliser gulp pour rationaliser mon SASS / café / compilation minification.

Voici mes gulpfile.js

var gulp   = require('gulp'),
    util   = require('gulp-util'),
    sass   = require('gulp-sass'),
    coffee = require('gulp-coffee');

var paths = {
    scripts: {
        src:  'src/coffee/**/*.coffee',
        dest: 'public/javascripts'
    },
    styles: {
        src:  'src/sass/*.sass',
        dest: 'public/stylesheets'
    }
};

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src)
        .pipe(coffee())
        .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('sass', function () {
   return gulp.src(paths.styles.src)
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('watch', function () {
  gulp.watch(paths.scripts.src, ['scripts']);
  gulp.watch(paths.styles.src, ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'watch']);

Cela fonctionne très bien pour la compilation de script café, mais échoue à la ligne a commenté, quand il s'agit Sass / boussole.

[gulp] Using file path/gulpfile.js
[gulp] Working directory changed to path
[gulp] Running 'scripts'...
[gulp] Running 'sass'...
[gulp] Running 'watch'...
[gulp] Finished 'watch' in 15 ms
[gulp] [gulp-sass] source string:1: error: @import directive requires a url or quoted path
// Here is what's throwing me for a loop. I'm assuming that it has something to do with
// gulp-sass not utilizing the ruby gem's source files for zurb-foundation/compass
[gulp] Finished 'sass' in 115 ms
[gulp] Finished 'scripts' in 122 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 11 μs

Est - il un moyen de contourner cela, ou est mon meilleur pari de passer de 4 à 5 et ajouter les fichiers de base dans mon src / café, donc il ne doit pas se fier à la recherche dans mon .rvm/../gemsdossier ??

Créé 13/02/2014 à 04:34
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
6

Essayez gulp-boussole au lieu de gulp-SASS.

MODIFIER

Permettez-moi de me excuse pour ma pauvre première réponse.

Je l' ai testé gulp boussole par moi - même et cela a fonctionné. Je ne suis pas sûr de votre configuration Foundation , mais ce que j'ai choisi a été l' aide de la Fondation avec boussole sur Mise en route sur SASS .

La partie pertinente de mes gulpfile.js est:

var compass = require('gulp-compass');

var paths = {
  styles: {
    src:  'scss/*.scss',
    dest: 'stylesheets'
  }
};

gulp.task('sass', function () {
  return gulp.src(paths.styles.src)
    .pipe(compass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'scss'
    }))
    .pipe(gulp.dest(paths.styles.dest));
});

L'exemple ci-dessus a une structure de répertoire différent du vôtre. Ainsi, vos gulpfile.js seraient:

var compass = require('gulp-compass');

var paths = {
  styles: {
    src:  'src/sass/*.sass',
    dest: 'public/stylesheets'
  }
};

gulp.task('sass', function () {
  return gulp.src(paths.styles.src)
    .pipe(compass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'sass'
    }))
    .pipe(gulp.dest(paths.styles.dest));
});

Pour les options pour « boussole () », « css » devrait être votre « css_dir » dans votre « config.rb » et « SASS » pour « sass_dir » comme décrit dans le README de gulp-boussole .

Espérons que cela fonctionnera pour vous.

Créé 13/02/2014 à 06:12
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more