search
LoginSignup
86

More than 5 years have passed since last update.

posted at

updated at

gulp.js その1 概要・基本

本家サイト:gulp.js

Grunt でなく gulp を使う理由

自動化するタスクを登録する設定ファイルを見比べると、gulpの方がはるかにすっきりしていて可読性高い。
新参のgulpはGruntに比べるとプラグインが少ないが、人気があるので今後充実していくだろう。
ルール等をきっちり決めるチーム運用の場合は、Gruntの方が良いらしい。
下記の記事が参考になった。

gulp でできること

プラグインを追加することで、様々な処理を自動化できる。例えば…

  • Webサーバー/ライブリロード(gulp-connec)
  • ライブリロードのみ(gulp-livereload)
  • Sass、Compass、CoffeeScript、Jadeなどのコンパイル
  • HTMLからJade,markdown,プレーンテキストに変換(gulp-html2xxxx)
  • CSS中に点在したメディアクエリーをまとめる(gulp-combine-media-queries)
  • CSSベンダープリフィックスの管理(gulp-autoprefixer)*指定でエラーが出るらしい
  • CSSプロパティ並び順整理(gulp-csscomb)
  • コードの連結(gulp-concat)
  • コードの圧縮(gulp-minify-html,)
  • コードの整形(gulp-prettify,)
  • CSSスプライト生成
  • 画像圧縮(gulp-imagemin)
  • markdownをPDFに変換(gulp-markdown-pdf)
  • 画像サイズ変換(gulp-image-resize)
  • コード構文チェック Lint
  • ファイル書き出し
  • 圧縮/解凍(gulp-zip,gulp-unzip,gulp-untar)
  • FTPアップロード(gulp-ftp,gulp-sftp)
  • 文字コード変換
  • 実体参照変換(gulp-entity-convert)
  • DataURI化(gulp-base64,gulp-css-base64,gulp-data-uri)
  • Bower(gulp-bower-files)
  • JSON,YAML,XML,PLIST,CSV の相互変換(gulp-convert,gulp-csv2json,gulp-xml2json)
  • HTMLテーブルをCSVに変換(gulp-table2csv)
  • サイトマップ作成(gulp-sitemap-files)
  • sitemap.xml生成(gulp-sitemap)
  • 通知センターに通知(gulp-notify)
  • Webページのスクリーンショット撮影(gulp-webshot)
  • Angular関連

インストール

グローバルへのインストール ★★要/不要?
npm install -g gulp

プロジェクトへのインストール(今いるディレクトリ内で)
npm install gulp

gulp -v でバージョンが表示されたらO.k.

使ってみる

管理したいプロジェクトにgulpをインストール

テスト用にプロジェクトディレクトリとして gulp_test ディレクトリを新規作成
ターミナルで gulp_test に移動、gulp をインストール
npm install gulp
gulp_test/node_modules/gulp ディレクトリ内に、インストールされる

タスクの作成と実行

gulp_test ディレクトリ内に、設定ファイル"gulpfile.js"を作成。以下記述をし保存

gulpfile.js
var gulp = require('gulp');

//デフォルトタスク
gulp.task('default', function() {
  console.log("デフォルトタスクが実行されたよ");
});

//test1タスク
gulp.task('test1', function() {
  console.log('test1タスクが実行されたよ');
});

//test2タスク
gulp.task('test2', function() {
  console.log('test2タスクが実行されたよ');
});

gulp_test ディレクトリ内で、
gulp default または gulp で、'default'タスク実行
gulp test1 で'test1'タスクの実行
gulp test2 で'test2'タスクの実行
gulp test1 test2 で'test1'タスクと'test2'タスクの実行

ファイルを監視させる

Sass,LESS,CoffeeScript,Jadeのコンパイルや、エラーチェック、コード圧縮など、ファイルの変更保存時にさせたい処理は多い
ここでは、監視するファイルとして style.scss を作成
以下gulpfile.js にファイル監視させるタスクを書いてみる

gulpfile.js
var gulp = require('gulp');

//ファイル監視
gulp.task('watch', function() {
  gulp.watch('style.scss', function(event) {
    console.log('ファイルが変更されたよ');
  });
});

gulp watch で 'watch'タスク実行。style.scss の監視を続ける。
エディタで style.scss を変更して保存すると、'ファイルが変更されたよ'と標準出力される。

タスクにタスクを登録

タスク内にタスクを組み込むことができる
処理の分離でコードの見通しが良くなり、タスクのセットを自在に組むことができる

gulp または gulp default で 'test1','test2','watch' を並列処理
gulp test で 'test1','test2' を並列処理
gulp test1 で 'test1' のみ実行

gulpfile.js
var gulp = require('gulp');

//test1タスク
gulp.task('test1', function() {
  console.log('test1タスクが実行されたよ');
});

//test2タスク
gulp.task('test2', function() {
  console.log('test2タスクが実行されたよ');
});

//ファイル監視
gulp.task('watch', function() {
  gulp.watch('style.scss', function(event) {
    console.log('ファイルが変更されたよ');
  });
});

//デフォルトタスク
gulp.task('default', ['test1','test2','watch']);

//test1,test2タスクをまとめたタスク
gulp.task('test', ['test1','test2']);

ツール

参考サイト

Grunt

自動化処理や管理の参考用に

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
86