Gulpのインストールから使うまでの流れを紹介します。
簡単にですが、プラグインの使い方の例も書いているので、初心者は使い方もふわっとわかるかと思います。
爆速コーディングするのにSCSS/Sassなど使うのでGulpを使えるようになってもりもりコーディングして行きましょう〜
Gulpの準備
nodejsをインストールしてください
公式サイト:nodejs
ターミナルでnode -v
でバージョンが表示されたらインストールされています。
cdで作っているプロジェクト内に移動して以下を実行
npm init
特に設定するものがない場合はエンターで進んでオッケーです
これでpackage.jsonが作成されます
次にGulpをグローバル環境にインストール
sudo gulp install gulp -g
password入力
*最初だけグローバル環境にインストールします。
以下のコマンドでgulpfile.jsを作成
touch gulpfile.js
*普通にjsファイル作るノリでfinderやエディタから作成してもいいですが、コマンドでも作れるので一応紹介
Gulpをプロジェクトのフォルダ内にインストール
npm install gulp —save-dev
package.jsonファイルのdependencyにgulpが追加されてたらOK
あとは以下のコマンドでプラグインをインストールしてgulpfile.jsでタスクなどを書いていく。
npm install 使用したいプラグイン --save-dev
簡単な使用例:
autoprefixerの使用例です。
ターミナル(プロジェクトのフォルダ内)にて
npm install gulp-autoprefixer --save-dev
gulpfile.jsにて
var gulp = require('gulp'); //gulpをインポート
var autoprefixer = require('gulp-autoprefixer'); //autoprefixerをインポート
gulp.task(‘タスク名', function() {
gulp.src('css/styles.css’) //ファイルの場所
.pipe(autoprefixer()) //autoprefixerを使う
.pipe(gulp.dest('build’)) //autoprefix後のcssファイルの行き先
});
これでターミナルからgulp タスク名
をrunするとbuildファイルが作られて、その中にautoprefix後のstyles.cssが作成されます。
あとはhtmlからbuild/styles.cssを読み込めばオッケーです。
watchする
いちいちgulp タスク名をrunしたくない人はwatchしよう
gulpfile.jsに以下を追記
gulp.task('watch', function() {
gulp.watch('css/styles.css', [‘タスク名']); //配列で複数のタスクを指定可能
});
これでターミナルからgulp watchをrunすると、gulp.watchで指定したファイルに変更があった際に、指定したタスクをrunしてくれます。
簡単な例でしたが、ざっくりな使い方はわかったかと思います。
SCSS/Sassやminify、uglifyなど色々タスクがあるので入れてrunしてみてください。
よくみるタスク一覧
- gulp-sass:CSSコンパイル
- gulp-rename:ファイル名の変更
- gulp-concat:複数のファイルを一つに
- gulp-plumber:エラーが起きてもwatchなどのタスクを継続。エラーのたびにいちいちgulp タスク名をrunしなおさなくでよくなる。
- gulp-merge-media-queries:メディアクエリの順番を整頓
- gulp-imageoptim:画像の圧縮
- gulp-changed:変更があったファイルを監視する
- gulp-notify:エラーの通知
- gulp-uglify:JavaScriptの圧縮
- gulp-minify-html:HTMLの圧縮
- gulp-minify-css:CSSの圧縮
- gulp-csslint:CSSの文法チェック
- gulp-jslint:JSの文法チェック
- browser-sync:ファイル等の保存時にブラウザをリロード
動かない時はちゃんとインストールされていないかもしれないので、package.json内のdependencyに追加したプラグインが追加されているか確認してみてください。
圧縮系のプラグインは最後に使えばオッケーかと思います。
必要に応じて使ってみてくださいませ。
では〜〜〜