gulp Webサイトコーディングを効率化する必要最小限4つのプラグインの導入手順

150626_001

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は言語の文法エラーを察知すると強制停止するため、それを防止するためのもの。

プラグインをインストール

コマンドプロンプトを立ち上げ、コーディング作業をするディレクトリへ移動。
続いて、下記コマンドを入力する。

まとめてインストールする場合

npm install browser-sync gulp-sass gulp-autoprefixer gulp-plumber --save-dev

1	npm install browser-sync gulp-sass gulp-autoprefixer gulp-plumber --save-dev

1つずつインストールする場合

npm install browser-sync --save-dev

1	npm install browser-sync --save-dev

npm install gulp-sass --save-dev

1	npm install gulp-sass --save-dev

npm install gulp-autoprefixer --save-dev

1	npm install gulp-autoprefixer --save-dev

npm install gulp-plumber --save-dev

1	npm install gulp-plumber --save-dev

package.jsonを確認すると、プラグインのバージョン情報等が追記された。

{
  "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"
  }
}

{

"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」フォルダを作成し、その中に各フォルダを作成。
特別なことをする必要はない。

t258jb11u58l3j0p

gulpfile.js 作成

gulpfile.jsを手動で作成し、htmlフォルダの直上に配置。
先ほど「html」フォルダを生成したので、ここでもディレクトリは「html」となっている。

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']);
});

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 とコマンドを入力。

150626_006

gulp 停止

コマンドプロンプトで Ctrl + C を入力すると、「バッチジョブを終了しますか (Y/N)?」と聞いてくる。
Yキーを押してから Enter で、「keitahirai」のgulpが停止。

150626_010

プラグインのアンインストール方法

例）gulp-autoprefixer を削除したい場合。

プラグインをインストールしたディレクトリで、

npm uninstall gulp-autoprefixer --save-dev

1	npm uninstall gulp-autoprefixer --save-dev

と入力。

unbuild gulp-autoprefixer と表示されれば、アンインストールが完了。

150626_011

インストールした時のコードが、

npm install gulp-autoprefixer --save-dev

1	npm install gulp-autoprefixer --save-dev

なので、install の前に un を追加すればOK。

やり方は人それぞれ

150626_012

私のやり方が正解、というわけではありません。
公式サイトでプラグインを探したり、自分好みの方法を見つけると良いでしょう。

鼻ちょうちん

gulp Webサイトコーディングを効率化する必要最小限4つのプラグインの導入手順

目次

4つのプラグイン

Browsersync

gulp-sass

gulp-autoprefixer

gulp-plumber

プラグインをインストール

まとめてインストールする場合

1つずつインストールする場合

–save-dev とは？

作業用ディレクトリを構築

gulpfile.js 作成

gulp 起動

gulp 停止

プラグインのアンインストール方法

やり方は人それぞれ

コメントを投稿する返信をキャンセル

gulp Webサイトコーディングを効率化する必要最小限4つのプラグインの導入手順

目次

4つのプラグイン

Browsersync

gulp-sass

gulp-autoprefixer

gulp-plumber

プラグインをインストール

まとめてインストールする場合

1つずつインストールする場合

–save-dev とは？

作業用ディレクトリを構築

gulpfile.js 作成

gulp 起動

gulp 停止

プラグインのアンインストール方法

やり方は人それぞれ

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル