勉強会行ってきました。

ちな第２回のね。その時のメモ ※あんまり精査していないので間違いあるかも。気づいた時に修正します。

gulpをインストール

gulpとは？

"ガルプ"ってみんな呼んでました。以前grunt.jsを使ったことがありますが、それに似たツールらしいです。便利だとか。全く無知識でいったので、いろいろバタバタしたお（^ω^

node.js install

node.jsがないと動作しないので、インストールしましょう。

$ mkdir gulp_study/
$ cd gulp_study/
$ npm init

gulp install

んで、gulpをインストール

# global
$ npm install -g gulp

# local
$ npm install -D gulp

$ ./node_modules/gulp/bin/gulp.js -v

gulpを実行

同階層にgulpfile.jsを用意

var gulp = require('gulp');

gulp.task('default', function() {
  console.log("Hello World!");
});

./node_modules/gulp/bin/gulp.js 
[14:47:51] Using gulpfile ~/gulp_study/gulpfile.js
[14:47:51] Starting 'default'...
Hello World!
[14:47:51] Finished 'default' after 116 μs

参考URL

qiita.com

gulpを使ってみます

環境整備

$ mkdir -p web/haml web/sass src/haml src/sass

srcにソースコードいれて、webにコンパイル後のデータ（htmlとかcssとか）を入れていきます。

hamlとsassのinstall & 実行

haml

$ npm install gulp-haml --save-dev
gulp-haml@0.1.5 node_modules/gulp-haml
├── replace-ext@0.0.1
├── map-stream@0.1.0
├── lodash@2.4.2
├── haml@0.4.3
├── hamljs@0.6.2
└── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, beeper@1.1.0, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, object-assign@3.0.0, lodash._reinterpolate@3.0.0, minimist@1.2.0, vinyl@0.5.3, chalk@1.1.1, lodash.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)

gulpfile.jsを修正する

// 宣言
var gulp = require('gulp');
var haml = require('gulp-ruby-haml');
 
// hamlタスク設定
gulp.task('haml', function() {
  gulp.src('./src/haml/*.haml').
       pipe(haml()).
       pipe(gulp.dest('./web/haml/'));
});
 
// 監視設定
gulp.task('watch',function(){
  gulp.watch('./src/haml/*.haml',['haml']);
});
 
// 項目追加
gulp.task('default',['haml','watch']);

hamlのファイルを用意します。

./src/haml/index.haml

!!! 5
%html
  %body
    %div.container
      %header
        %h1 title
        %h2 subtitle
      %div.contents
        %div.single-box
          %h2.box-title
          %p.box-discription
      %footer
        %p unitopi. All rights reserved.

そして実行

$ ./node_modules/gulp/bin/gulp.js 
module.js:338
    throw err;
    ^

Error: Cannot find module 'gulp-ruby-haml'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/gulp_study/gulpfile.js:3:12)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

なんか実行できなかったので、検索してインストールしてみる。

rubyのgemでインストールしてって記事みてみた。

$ sudo gem install haml

installは成功したが、エラーコードは変わらない。

これは探せなかったが、npmでインストールして見る

$ npm install gulp-ruby-haml

お、入った。どうやらあたりっぽい

再度実行してみる

./node_modules/gulp/bin/gulp.js 
[15:10:19] Using gulpfile ~/gulp_study/gulpfile.js
[15:10:19] Starting 'haml'...
[15:10:19] Finished 'haml' after 7.67 ms
[15:10:19] Starting 'watch'...
[15:10:19] Finished 'watch' after 8.16 ms
[15:10:19] Starting 'default'...
[15:10:19] Finished 'default' after 6 μs

できたヾ(´∀｀)ﾉｷｬｯｷｬ

そして、./web/haml/のディレクトリを確認してみると、index.htmlがあればおｋ．

また、watchも記載しているので、これがあると、そのままhamlのファイルを更新・修正すると、それをgulpが監視して、コンパイルしてくれるらしい。すごい。

試してみたところ、できました！すごい。これやばい。

ちなみに、hamlの構文を間違えて書いちゃうとgulpが落ちた。

構文はこちらで確認しました。ありがとうございます。

unoh.github.com by unoh

参考URL

unitopi.com

saas

$ npm install gulp-sass --save-dev
> spawn-sync@1.0.13 postinstall /Users/gulp_study/node_modules/gulp-sass/node_modules/node-sass/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall

-
> node-sass@3.3.3 install /Users/gulp_study/node_modules/gulp-sass/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /Users/gulp_study/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-46/binding.node

> node-sass@3.3.3 postinstall /Users/gulp_study/node_modules/gulp-sass/node_modules/node-sass
> node scripts/build.js

` /Users/gulp_study/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-46/binding.node ` exists. 
 testing binary.
Binary is fine; exiting.
gulp-sass@2.0.4 node_modules/gulp-sass
├── object-assign@2.1.1
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
├── gulp-util@3.0.6 (array-uniq@1.0.2, array-differ@1.0.0, object-assign@3.0.0, beeper@1.1.0, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, replace-ext@0.0.1, minimist@1.2.0, vinyl@0.5.3, through2@2.0.0, multipipe@0.1.2, lodash.template@3.6.2, chalk@1.1.1, dateformat@1.0.11)
└── node-sass@3.3.3 (get-stdin@4.0.1, async-foreach@0.1.3, nan@2.0.9, mkdirp@0.5.1, chalk@1.1.1, gaze@0.5.1, glob@5.0.14, meow@3.3.0, npmconf@2.1.2, cross-spawn@2.0.0, request@2.64.0, node-gyp@3.0.3, sass-graph@2.0.1)

参考

codezine.jp

imagemin

なんか、画像を圧縮してくれるやつらしい。２つコマンドを実行してインストールする。

$ npm install gulp-imagemin --save-dev

> optipng-bin@3.0.2 postinstall /Users/gulp_study/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> gifsicle@3.0.1 postinstall /Users/gulp_study/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully

> jpegtran-bin@3.0.4 postinstall /Users/gulp_study/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully
gulp-imagemin@2.3.0 node_modules/gulp-imagemin
├── object-assign@3.0.0
├── plur@1.0.0
├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── through2-concurrent@1.1.0 (through2@2.0.0)
├── pretty-bytes@2.0.1 (get-stdin@4.0.1, number-is-nan@1.0.0, meow@3.3.0)
├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, beeper@1.1.0, replace-ext@0.0.1, minimist@1.2.0, vinyl@0.5.3, through2@2.0.0, multipipe@0.1.2, lodash.template@3.6.2, dateformat@1.0.11)
└── imagemin@3.2.0 (get-stdin@4.0.1, path-exists@1.0.0, optional@0.1.3, through2@0.6.5, concat-stream@1.5.0, stream-combiner2@1.0.2, meow@3.3.0, buffer-to-vinyl@1.0.1, vinyl-fs@1.0.0, imagemin-svgo@4.1.2, imagemin-optipng@4.3.0, imagemin-gifsicle@4.2.0, imagemin-jpegtran@4.3.0)


$ npm install imagemin-pngquant --save-dev
> pngquant-bin@3.0.0 postinstall /Users/gulp_study/node_modules/imagemin-pngquant/node_modules/pngquant-bin
> node lib/install.js

  ✔ pngquant pre-build test passed successfully
imagemin-pngquant@4.2.0 node_modules/imagemin-pngquant
├── is-png@1.0.0
├── through2@2.0.0 (xtend@4.0.0, readable-stream@2.0.2)
└── pngquant-bin@3.0.0 (logalot@2.1.0, bin-build@2.1.2, bin-wrapper@3.0.2)

無事成功かな。

重たい画像をひとつGoogleからダウンロードして配置します。

$ mkdir src/image/ web/image/
$ mv omoi.jpg src/image/
$ ls -l src/image/
total 33648
-rw-r-----@ 1 User  staff  17224423  9 26 15:33 omoi.jpg

16M....

gulpfile.jsにタスクを追加します。

gulpfile.js

// 宣言
var gulp = require('gulp');
var haml = require('gulp-ruby-haml');
var imagemin = require('gulp-imagemin'); // <- 追加
 
// hamlタスク設定
gulp.task('haml' /* <- これがタスク名 */, function() {
  gulp.src('./src/haml/*.haml').
       pipe(haml()).
       pipe(gulp.dest('./web/haml/'));
});
 
// 監視設定
gulp.task('watch',function(){
  gulp.watch('./src/haml/*.haml',['haml']/* <- watchされて実行されるタスク名 */ );
});
 
// 項目追加
gulp.task('default',['haml','watch']);


/* ここから */
var paths = {
  srcDir : './src/image/',
  dstDir : './web/image/'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});
/* ここまでを追加 */

んで、実行。

$ ./node_modules/gulp/bin/gulp.js imagemin
[15:38:51] Using gulpfile ~/gulp_study/gulpfile.js
[15:38:51] Starting 'imagemin'...
[15:38:51] Finished 'imagemin' after 8.41 ms
[15:38:53] gulp-imagemin: Minified 1 image (saved 399.94 kB - 2.3%)

お、できたで。

$ ls -l web/image/
total 32864
-rw-r-----  1 User  staff  16824482  9 26 15:38 omoi.jpg

あんまり圧縮されていない。。。。。。(´・ω・｀)

参考URL

http://whiskers.nukos.kitchen/2014/12/11/gulp-imagemin.htmlwhiskers.nukos.kitchen

まとめ

なんだこれ！すげぇー便利。

今携わっているプロジェクトにはすぐには使えないけど、新規ならこれ使ったほうがいいじゃん！って思った。

また、そのあと仕事が待っていたので懇親会参加したかった。。。次回は行きたい。

ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお（^ω^ = ^ω^）

Gulp.jsを使ってみた

gulpをインストール

gulpとは？

node.js install

gulp install

gulpを実行

参考URL

gulpを使ってみます

環境整備

hamlとsassのinstall & 実行

haml

参考URL

saas

参考

imagemin

参考URL

まとめ