タグ: gulp

gulpのbrowser-syncで自動リロード環境をつくる。

gulpのbrowser-syncで自動リロード環境をつくる。

自動リロードしたくなったのでインストールしました。

npmインストール(※ gulpのオプションつき)

% npm install browser-sync gulp --save-dev

browserSyncをrequire()に追加

browserSync.initの proxyオプションは開くアプリケーションのサーバーのURL(今回は192.168.0.17)を指定しています。

 var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create();
    
gulp.task('sass',function(){
  gulp.src('sass/**/*.sass')
    .pipe(
      sass({
        sourceComments: 'map',
        outputStyle: 'nested'//'compressed'
      }))
    .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
  browserSync.init({proxy: 'http://192.168.0.17/index.html'});
  gulp.watch('sass/**/*.sass', ['sass',browserSync.reload]);
});

ここまでで最少の基本的な設定OKな感じ。

もう少し使い勝手をよくしたい。

ので、コマンドライン引数からSyncするファイルを指定できるようにしました。
コマンドの実行は以下のように-pathオプションを渡してファイルを指定する。

# gulp watch -path 'README.md'

受け取るプログラム側は、‘browserSyncProxy’ という変数を用意して。
-pathのパラメータがあれば後ろに追記する。
ということを冒頭部分に追加。

var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    browserSyncProxy = 'http://192.168.0.17/';

if(typeof process.argv[3] !== 'undefined' && process.argv[3] === '-path'){
  browserSyncProxy += encodeURI(process.argv[4]);
}

全体は以下の通り。

var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    browserSyncProxy = 'http://192.168.0.17/';

if(typeof process.argv[3] !== 'undefined' && process.argv[3] === '-path'){
  browserSyncProxy += encodeURI(process.argv[4]);
}

gulp.task('sass',function(){
  gulp.src('sass/**/*.sass')
    .pipe(
      sass({
        sourceComments: 'map',
        outputStyle: 'nested'//'compressed'
      }))
    .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
  browserSync.init({proxy: browserSyncProxy});
  gulp.watch('sass/**/*.sass', ['sass',browserSync.reload]);
});

gulpを使って、frontnoteでスタイルガイドを作ってみる。

gulpを使って、frontnoteでスタイルガイドを作ってみる。

まずは普通にsassがコンパイルできる環境を作って、HTML/CSSがかけるようにする。
(npmのインストールやgulpの基本的なところは省いています m(_ _)m)

frontnote ( https://github.com/frontainer/frontnote)

% npm install --save-dev gulp-frontnote

gulpfile.jsの編集(docというタスクで登録
コメント最初わからなかったのは、出力されたHTMLが読み込むCSSを、“css: [‘../css/style.css’] ”で指定する必要があること。
out: ‘./_styleguide’,は、出力するHTML一式の保存先のディレクトリ

var frontNote = require('gulp-frontnote');
gulp.task('doc', function() {
  gulp.src('sass/**/*.scss')
    .pipe(frontNote({
      out: './_styleguide',
      css: ['../css/style.css']
    }));
});

タスクを実行すると、styleguideフォルダ以下に出力されてようです。

  • ディレクトリ直下にスタイルガイドのHTML
  • assets以下にCSSなどの関連ファイル
% gulp doc  
[20:01:15] Using gulpfile ~/htdocs/_template/frontnote_example/gulpfile.js
[20:01:15] Starting 'doc'...
[20:01:15] Finished 'doc' after 6.72 ms
✔ Generated StyleGuide

% find ./_styleguide/
./_styleguide/
./_styleguide//assets
./_styleguide//assets/css
./_styleguide//assets/css/style.css
./_styleguide//assets/fonts
./_styleguide//assets/fonts/fontawesome-webfont.eot
./_styleguide//assets/fonts/fontawesome-webfont.svg
./_styleguide//assets/fonts/fontawesome-webfont.ttf
./_styleguide//assets/fonts/fontawesome-webfont.woff
./_styleguide//assets/fonts/FontAwesome.otf
./_styleguide//assets/images
./_styleguide//assets/images/favicon.ico
./_styleguide//assets/images/frontnote.png
./_styleguide//assets/js
./_styleguide//assets/js/main.js
./_styleguide//assets/js/ripple-effect.js
./_styleguide//assets/lib
./_styleguide//assets/lib/highlight.pack.js
./_styleguide//assets/lib/jquery.js
./_styleguide//assets/lib/jquery.mousewheel.js
./_styleguide//index.html
./_styleguide//sass-style.html

出力したガイド

出力したガイド

SASSのファイルは以下の用に記載しています。

/*
#overview
The・スタイルガイド

このスタイルガイドは簡単な練習用です。
*/
/*
#colors
@メインカラー #996600
@キーカラー #333
@アクセントカラー #ccc
*/

html{
    font-size: 10px;
}
body{
    font-size: 1.4rem;
}

/*
#styleguide
ボタンスタイル

.btnです。

```
<a class="btn" href="#">ボタン</a>
```

*/

.btn{
    display: inline-block;
    border: solid 1px #ccc;
    background: #999;
    padding: 1em;
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
    a{
        text-decoration: none;
        color: #fff;
    }
}

参考サイト

gulpのsass,scssのコンパイルの高速化(LibSassをつかって)

gulpのsass,scssのコンパイルの高速化(LibSassをつかって)

これまではcompass+sassをgulpのタスクランナーで利用していてコンパイルが重くなってきたのでより高速で快適な環境にするため、良いという噂のLibsassを使った環境に変更してみました。

CompassをLibsassとAutoprefixerの環境に変更

基本的なコンパイルは Libsassを使えるgulpのライブラリ’gulp-sass’をつかいます。
またベンダープリフィックスの自動付与もgulpのライブラリ’gulp-autoprefixer’を使います。
合わせてインストール。

$ npm install gulp-sass --save-dev
$ npm install --save-dev gulp-autoprefixer

gulpfile.js

ディレクトリ構成は以下を想定

webroot/
    css/コンパイルされたcss
    scss/コンパイル前のcscc

gulpfile.js 最少構成

var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('scss',function(){
  gulp.src('scss/**/*.scss')
    .pipe(
      sass({
        outputStyle: 'compressed'
      })
    .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
    }))
    .pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['scss']);
});

ターミナルからgulpを実行してwatchして完了だいぶ高速になり、快適になりました。

$ gulp watch
[12:54:32] Using gulpfile your/project/path/gulpfile.js
[12:54:32] Starting 'watch'...
[12:54:32] Finished 'watch' after 11 ms

以下のようなスピード感。(msとか、μsとか1秒以内)

参考サイト

gulp-sass
gulp-autoprefixer
「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

Powered by WordPress & Theme by Anders Norén