Gulpを用いたフロントエンド開発の自動構築プロセス

GulpはNodejsベースのタスク実行ツールであり、javascript/coffee/sass/less/html/image/cssなどのファイルのテスト、検証、結合、圧縮、フォーマット、ブラウザ自動リロード、デプロイファイル生成を自動化します。ファイル変更時に指定されたステップを繰り返し実行する監視機能も備えています。実装ではUnixオペレーティングシステムのパイプ（pipe）概念を参考にし、前段の出力を次段の入力として直接受け渡すことで操作が簡易化されています。

GulpとGruntは似ていますが、Gruntに比べてIO操作が頻繁であるのに対し、Gulpはストリーム処理により構築作業を高速かつ簡便に行えます。

1、Node.js環境のインストール http://nodejs.org；

コマンドラインでnode -vを入力

Enterキーを押すと、正常にインストールされている場合nodeのバージョンが表示されます；

コマンドラインでnpm -vを入力

正常に動作している場合npmのバージョンが表示されます；

エラーが発生した場合は再試行してください；

2、npmの概要

（1）npmパッケージのインストール

 npm install [-g] [--save-dev]

（2）npmパッケージのアンインストール

 npm uninstall [-g] [--save-dev]

（3）npmパッケージの更新

 npm update [-g] [--save-dev]（nameを指定しない場合すべてのパッケージを更新）
 npm help、 npm list

npmは海外サーバーからパッケージを取得するため、ネットワーク状況によってはエラーが発生する可能性があります。タオバオミラーを使用することを推奨します

注意：インストール後はcnpm -vを確認するか、コマンドプロンプトを閉じて再開してください。インストール直後に使用するとエラーが発生する可能性があります；npm install cnpm -g --registry=https://registry.npm.taobao.org

3、Gulpのグローバルインストール cnpm install gulp -g Enterキーを押す gulp -vを入力するとバージョン番号が表示されるはずです；

4、package.jsonファイルの構成

{
"name": "test",//プロジェクト名（必須）
"version": "1.0.0",////プロジェクトバージョン（必須）
"description": "This is for study gulp project !",//プロジェクト説明（必須）
"homepage": "",//プロジェクトホームページ
"repository": {//プロジェクトリポジトリ
"type": "",
"url": ""//アドレス
},
"author": {
"name": "xyphf",//著者
"email": "2766588380@qq.com"//メールアドレス
},
"license": "ISC", //プロジェクトライセンス
"devDependencies": {//プロジェクトに必要なプラグイン
"gulp": "^3.8.11",
"gulp-concat": "^2.6.0",//ファイル結合
"gulp-cssmin": "^0.1.7",//CSS圧縮
"gulp-imagemin": "^3.1.1",//画像圧縮
"gulp-jshint": "^2.0.2",//JS検証
"gulp-rename": "^1.2.2",//ファイル名変更
"gulp-uglify": "^2.0.0",//JS圧縮
"jshint": "^2.9.4"
}
}

注意：JSONファイル内にはコメントを記述できません。次の内容をコピーする際はコメントを削除してください；このpackage.jsonをコピーして直接実行してください npm install

5、ローカルにGulpプラグインをインストール

cdでプロジェクトディレクトリに移動し、npm install --save-devを実行してください

PS：気付いたあなたは、グローバルにGulpをインストールしたにもかかわらずプロジェクトにもGulpをインストールしていることに気づくかもしれません。グローバルにインストールしたGulpはタスクを実行するために、ローカルにインストールしたGulpはプラグインの機能を呼び出すために使用されます。

6、ローカルにGulpプラグインをインストール フロントエンドプロジェクトで必要な機能：（1）画像（JPG/PNG/GIF形式の圧縮をサポート）（2）スタイル（SASSをサポートし、結合・圧縮・リネームを実行）（3）JavaScript（検証・結合・圧縮・リネーム）（4）HTML（圧縮）（5）クライアント側の自動リロード（6）ビルド前の配信環境のファイルをクリーンアップ（配信環境の整潔を保つ）

Gulpプラグインから対応するコンポーネントを検索してください

gulp-imagemin: 画像圧縮
gulp-ruby-sass: SASSサポート
gulp-minify-css: CSS圧縮
gulp-jshint: JS検証
gulp-uglify: JS圧縮
gulp-concat: ファイル結合
gulp-rename: ファイル名変更
gulp-htmlmin: HTML圧縮
gulp-clean: フォルダクリーン
gulp-livereload: サーバー制御によるクライアントリロード（Chrome拡張機能LiveReloadおよびtiny-lrと併用）

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

7、gulpfile.jsファイルの作成（重要）

Gulpには5つのメソッドがあります：src、dest、task、run、watch
srcとdest：元ファイルと処理後のファイルのパスを指定
watch：ファイル変更の監視
task：タスクの指定
run：タスクの実行
var gulp = require('gulp'), //基本ライブラリ
htmlmin = require('gulp-htmlmin'),//HTML圧縮 
css = require('gulp-minify-css'),//CSS圧縮
less = require('gulp-less'),//LESSファイル解析
imagemin = require('gulp-imagemin'),//画像圧縮
jshint = require('gulp-jshint'), //JS検証
uglify = require('gulp-uglify'), //JS圧縮
rename = require('gulp-rename'), //ファイル名変更
concat = require('gulp-concat'), //ファイル結合
clean = require('gulp-clean'), //フォルダクリーン
tinylr = require('tiny-lr') //liveload
rev = require('gulp-rev'),//バージョン番号
server = tinylr(),
port = 35729,
liveload = require('gulp-liveload');//liveload

// HTML処理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';

gulp.src(htmlSrc)
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});

// スタイル処理
gulp.task('css', function () {
var cssSrc = './src/scss/*.scss',
cssDst = './dist/css';

gulp.src(cssSrc)
.pipe(sass({ style: 'expanded'}))
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});

// 画像処理
gulp.task('images', function(){
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})

// JS処理
gulp.task('js', function () {
var jsSrc = './src/js/*.js',
jsDst ='./dist/js';

gulp.src(jsSrc)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});

// 画像・スタイル・JSのクリーン
gulp.task('clean', function() {
gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
.pipe(clean());
});

// デフォルトタスク 画像・スタイル・JSをクリーンして再構築 実行コマンド gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});

// バージョン番号変更
gulp.task('rev',function(){
gulp.src(['./src/*.json','./src/*.html'])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest('dist/'))
});

// 監視タスク 実行コマンド gulp watch
gulp.task('watch',function(){

server.listen(port, function(err){
if (err) {
return console.log(err);
}

// HTML監視
gulp.watch('./src/*.html', function(event){
gulp.run('html');
})

// CSS監視
gulp.watch('./src/scss/*.scss', function(){
gulp.run('css');
});

// 画像監視
gulp.watch('./src/images/**/*', function(){
gulp.run('images');
});

// JS監視
gulp.watch('./src/js/*.js', function(){
gulp.run('js');
});

});
});

8、Gulpの実行 gulp タスク名 gulp defaultまたはgulpを実行するとdefaultタスク内のすべてのタスクが実行されます

9.LiveReloadの設定 1、Chrome用LiveReloadをインストール 2、npmでhttp-serverをインストールし、高速なHTTPサービスを構築 npm install http-server -g 3、distディレクトリに移動 4、http-serverを実行し、デフォルトポート8080で起動 5、localhost:8080にアクセス 6、別のコマンドプロンプトを開き、プロジェクトパスに移動してgulpを実行し、配信環境をクリーンして初期化 7、監視を実行(gulp watch) 8、ChromeのLiveReload拡張機能をクリックし、空心が実心に変わったら関連付けが完了です。CSS/JS/HTMLの編集が即座にページに反映されます。

Gulpの主な情報源

Gulp公式サイト：http://gulpjs.com

Gulpプラグイン一覧：http://gulpjs.com/plugins

Gulp公式API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

Gulp日本語API：http://www.ydcss.com/archives/424

タグ: gulp Node.js npm javascript Sass

8月24日 03:16 投稿

異端開発室

Gulpを用いたフロントエンド開発の自動構築プロセス

ホットタグ