Supertrue walfo

Gulp, Sass/Css の処理

Gulp での Sass/Css の処理。
gulp-sass や gulp-autoprefixer によるSass/Css の処理。

概要

  • expanded と compressed の両方のスタイルを保持したい
  • ベンダープリフックスを付けるのを効率化したい

ディクレクトリ構造

 .
 ├── src
 │   └── sass
 ├── tmp
 │   └── css (expanded)
---✂----------------------
 └── dist
     └── css (compressed)
フォルダ 説明
src/sass 作業用
tmp/css expanded の保管
dist/css compressed の保管

フロー

  1. src/sass で作業
  2. Sassのコンパイル
  3. プリフックスの調整
  4. tmp/css に出力 (expanded)
  5. 圧縮
  6. dist/css に出力 (compressed)

軸が2つあるので、4の手前でタスクを区切る。

プリフィックスの調整は、Compass は情報が古く有用ではないらしいので、gulp-autoprefixer に任せる。

実装

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');

var $ = gulpLoadPlugins();
//  ├── gulp-sass
//  ├── gulp-autoprefixer
//  ├── gulp-minify
//  ├── gulp-changed
//  ├── gulp-cache
//  └── gulp-plumber

var AUTOPREFIXER_BROWSERS = [
  'ie >= 9',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.2',
  'bb >= 10'
];

gulp.task('sass', function() {
  return gulp.src('src/sass/**/*.scss')
    .pipe($.plumber())
    .pipe($.sass({
      precision: 10,
      outputStyle: 'expanded'
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('tmp/css'));
});

gulp.task('css', function() {
  return gulp.src('tmp/css/**/*.css')
    .pipe($.changed('tmp/css', {extension: '.css'}))
    .pipe($.cache($.minifyCss()))
    .pipe(gulp.dest('dist/css'));
});

// watch
gulp.watch(['src/sass/**/*.scss'], ['sass']);
gulp.watch(['tmp/css/**/*.css'], ['css']);

リンク

2015年7月10日 13:00
2015年7月10日 14:39 編集済み