gulp Webサイトコーディングを効率化する必要最小限4つのプラグインの導入手順
2016/11/15 gulp-compassをやめて、gulp-sassに変更しました。
gulpプラグインは多数公開されていますが、実務に必要なものはそう多くありません。
4つあるだけで作業時間をかなり短縮できますから、その導入手順を紹介します。
gulpの準備については、1つ前の記事をご覧ください。
目次
4つのプラグイン
Browsersync
ファイルを保存するとブラウザに反映するライブリロード系。
ブラウザ間の同期機能があり、現時点では最も便利。
gulpなしの単体でも使える。
gulp-sass
gulp-compassは謎エラーが多いので、gulp-sassを利用。
gulp-autoprefixer
コンパイル後のCSSに、現時点で必要な分だけのベンダープレフィックスを自動付与。
Compassのミックスインを使う必要がなくなる。
gulp-plumber
gulpは言語の文法エラーを察知すると強制停止するため、それを防止するためのもの。
プラグインをインストール
コマンドプロンプトを立ち上げ、コーディング作業をするディレクトリへ移動。
続いて、下記コマンドを入力する。
まとめてインストールする場合
1 | npm install browser-sync gulp-sass gulp-autoprefixer gulp-plumber --save-dev |
1つずつインストールする場合
1 | npm install browser-sync --save-dev |
1 | npm install gulp-sass --save-dev |
1 | npm install gulp-autoprefixer --save-dev |
1 | npm install gulp-plumber --save-dev |
package.jsonを確認すると、プラグインのバージョン情報等が追記された。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | { "name": "keitahirai", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.7.12", "gulp": "^3.9.0", "gulp-autoprefixer": "^2.3.1", "gulp-sass": "^2.3.2," "gulp-plumber": "^1.0.1" } } |
–save-dev とは?
開発用(案件用)のプラグインとして、ディレクトリごとにローカルインストールすること。
作業用ディレクトリを構築
ディレクトリ直下に「html」フォルダを作成し、その中に各フォルダを作成。
特別なことをする必要はない。
gulpfile.js 作成
gulpfile.jsを手動で作成し、htmlフォルダの直上に配置。
先ほど「html」フォルダを生成したので、ここでもディレクトリは「html」となっている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | var gulp = require('gulp'), autoPre = require("gulp-autoprefixer"), // ベンダープレフィックス bSync = require('browser-sync'), // ライブリロード plumber = require('gulp-plumber'), // 強制終了防止 sass = require('gulp-sass') // Sass ; // ライブリロード gulp.task('browser-sync', function() { bSync({ server: { baseDir: "./html" } }); }); gulp.task('bs-reload', function() { bSync.reload() }); // Sass, ベンダープレフィックス gulp.task('sass', function() { gulp.src('./html/scss/**/*.scss') .pipe(plumber()) .pipe(sass({outputStyle: 'expanded'})) .pipe(autoPre({ browsers: ['last 2 versions', 'ie 10'], cascade: false })) .pipe(gulp.dest('./html/css/') ) .pipe(bSync.reload({stream:true}) ); }); // HTML gulp.task('html', function() { gulp.src('./html/**/*.html') .pipe(plumber()) .pipe(gulp.dest('./html/**/*.html') ) .pipe(bSync.reload({stream:true}) ); }); // JavaScript gulp.task('js', function() { gulp.src('./html/**/*.js') .pipe(plumber()) .pipe(gulp.dest('./html/js') ) .pipe(bSync.reload({stream:true}) ); }); // ファイル監視 gulp.task('default', ['browser-sync'], function() { gulp.watch("html/**/*.scss", ['sass']); gulp.watch("html/**/*.html", ['bs-reload']); gulp.watch("html/**/*.js", ['bs-reload']); }); |
gulp 起動
コマンドプロンプトに戻り、gulp とコマンドを入力。
gulp 停止
コマンドプロンプトで Ctrl + C を入力すると、「バッチ ジョブを終了しますか (Y/N)?」と聞いてくる。
Yキー を押してから Enter で、「keitahirai」のgulpが停止。
プラグインのアンインストール方法
例)gulp-autoprefixer を削除したい場合。
プラグインをインストールしたディレクトリで、
1 | npm uninstall gulp-autoprefixer --save-dev |
と入力。
unbuild gulp-autoprefixer と表示されれば、アンインストールが完了。
インストールした時のコードが、
1 | npm install gulp-autoprefixer --save-dev |
なので、install の前に un を追加すればOK。
やり方は人それぞれ
私のやり方が正解、というわけではありません。
公式サイトでプラグインを探したり、自分好みの方法を見つけると良いでしょう。
コメントを投稿する