var Phenix = function () {
Troll du Web depuis 1996

Gulp

Un fichier sourcemap SASS pour Foundation

Un de mes collègues a trouvé une solution pour avoir un fichier source map quand on compile Foundation.

Son fichier fait d’autres trucs, je n’ai extrait que la partie source map.

On commence par installer gulp-sourcemap :

  1. npm install gulp-sourcemaps --save-dev

Ensuite on adapte le fichier gulpfile.js pour qu’il génère le sourcemap :

  1. var gulp = require('gulp');
  2. var $ = require('gulp-load-plugins')();
  3.  
  4. var sassPaths = [
  5. 'bower_components/foundation-sites/scss',
  6. 'bower_components/motion-ui/src'
  7. ];
  8.  
  9. gulp.task('sass', function() {
  10. return gulp.src('scss/app.scss')
  11. .pipe($.sourcemaps.init())
  12. .pipe($.sass({
  13. includePaths: sassPaths,
  14. outputStyle: 'compressed' // if css compressed **file size**
  15. }).on('error', $.sass.logError))
  16. .pipe($.autoprefixer({
  17. browsers: ['last 2 versions', 'ie >= 9']
  18. }))
  19. .pipe($.sourcemaps.write('../css'))
  20. .pipe(gulp.dest('css'));
  21. });
  22.  
  23. gulp.task('default', ['sass'], function() {
  24. gulp.watch(['scss/**/*.scss'], ['sass']);
  25. });