Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

gulp.js その1 概要・基本

More than 5 years have passed since last update.

本家サイト: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

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

oreo3@github
日々勉強しつつ、できる範囲でWeb制作等をしています。 デザイン、SEO、マーケティング、WordPress
https://nagaishouten.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away