忍者ブログ

STEP UP BLOG

Home > ブログ > > [PR] Home > ブログ > gulp > GulpでSass

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

GulpでSass

少し間があいてしました。
前回はGulpでjavascript周りの処理を行いましたが、今回はCSSです。
Sassを使います。

前回
GulpでSass|gulp|STEP UP BLOG

$ cd project_dir
$ mkdir -p src/scss
$ mkdir -p public/assets/css
$ cat src/css/style.scss 
$bgcolor: #efefef;

body {
    background: $bgcolor;
}

$ cat gulpfile.js 
'use strict';

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var es = require('event-stream');
var sass = require('gulp-sass');

gulp.task('script', function(callback) {
    var sc = gulp.src(['src/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/assets/js'));
    var br = browserify({
            debug: true,
            entries: ['public/assets/js/all.js']
        }).bundle()
        .pipe(source('all.js'))
        .pipe(gulp.dest('public/assets/js'));
    return es.merge(sc, br);
});

gulp.task('style', function(callback) {
    return gulp.src(['src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('public/assets/css'));
});

gulp.task('hoge', function(callback) {
    console.log('hoge');
});

gulp.task('default', ['script', 'style']);

$ npm install --save-dev gulp-sass
$ gulp
$ cat public/assets/css/style.css
body {
  background: #efefef; }

出来ました!

jsに比して簡単すぎる。。
ということでもう少し手を加えていきます。
pleeeaseでベンダープレフィックスや圧縮も試してみましょう。
http://pleeease.io/
$ npm install --save-dev gulp-pleeease

$ cat src/scss/style.scss
$bgcolor: #efefef;

body {
    background: $bgcolor;
}

.box {
    display: flex;
}

$ cat gulpfile.js
...
var pleeease = require('gulp-pleeease');

...

gulp.task('style', function(callback) {
    return gulp.src(['src/scss/*.scss'])
        .pipe(sass())
        .pipe(pleeease())
        .pipe(gulp.dest('public/assets/css'));
});

…

pleeease追加前
$ cat public/assets/css/style.css
body {
  background: #efefef; }

.box {
  display: flex; }

pleeease追加後
$ cat public/assets/css/style.css
body{background:#efefef}.box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

こんな感じです。

参考URL
http://isee-web.net/?p=593
PR

Comment0 Comment

Comment Form

  • お名前name
  • タイトルtitle
  • メールアドレスmail address
  • URLurl
  • コメントcomment
  • パスワードpassword

PAGE TOP