GulpはASP.NET 5

この文書では、タスクスクリプト(task runner)やコマンドラインツールを使用したことがないと仮定し、Gulpを一歩一歩教えています.怖がらないでください.それは実は簡単です.gulpを5つのステップに分けて紹介し、驚くべきことを完成させます.では、直接始めましょう.
ステップ1:ノードのインストール
まず、最も基本的で最も重要なのは、node環境を構築する必要があります.アクセスhttp://nodejs.orgをクリックして、大きな緑のinstallボタンをクリックし、ダウンロードが完了したらプログラムを直接実行し、すべての準備が整いました.npmはインストールパッケージとともにインストールされ、後で使用されます.
ステップ2:コマンドラインの使用
コマンドラインとは何か、OSXの端末(Terminal)、windowsのコマンドプロンプト(Command Prompt)をよく知らないかもしれませんが、すぐにわかります.それほど簡単ではないように見えますが、コツをマスターすると、Sass、Yeoman、Gitなど、多くのコマンドラインプログラムを簡単に実行することができます.これらは非常に有用なツールです.
コマンドラインに詳しい場合は、手順4に直接ジャンプします.
ノードが正しくインストールされていることを確認するために、いくつかの簡単なコマンドを実行します.

node -v

Enter(Enter)に戻って、正しくインストールすれば、インストールされているNodeのバージョン番号が見えます.次にnpmを見てみましょう.

npm -v

これもnpmのバージョン番号を得ることができます.
この2行のコマンドが返されなければ、nodeが正しくインストールされていない可能性があります.コマンドラインツールを再起動してみてください.まだできない場合は、最初のステップに戻って再ロードするしかありません.
ステップ3:プロジェクトへのナビゲート
コマンドラインを大体理解し、簡単に使用する方法を知っています.次に、2つの簡単なコマンドだけでファイルディレクトリにナビゲートし、ディレクトリにどんなファイルがあるかを見ることができます.

cd、ディレクトリにナビゲート

ls、リストファイル

この2つのコマンドを多くノックして、ファイルシステムを理解し、ファイルがどこにあるかを知ることをお勧めします.
この2つのコマンドを使用することに慣れたら、私たちのプロジェクトディレクトリに入ります.このディレクトリはそれぞれ異なります.例を挙げると、これは私が私のプロジェクトディレクトリに入るコマンドです.

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

プロジェクトディレクトリに正常にアクセスしたらgulpのインストールを開始します.
ステップ4:gulpのインストール
コマンドラインの使い方はすでに知っていますが、新しいものを試して、npmを認識してgulpをインストールします.
NPMはコマンドラインベースのnodeパッケージ管理ツールで、nodeのプログラムモジュールをプロジェクトにインストールし、公式サイトで使用可能なすべてのプログラムモジュールを表示および検索できます.
コマンドラインに入力

sudo npm install -g gulp 

sudoは管理者としてコマンドを実行しており、一般的にはパソコンのパスワードの入力が要求される

npmはnodeモジュールをインストールするツールであり、installコマンドを実行する

-gは、どの項目でも使えるようにグローバル環境に設置していることを示している

最後にgulpはインストールするnodeモジュールの名前

実行時にコマンドラインにエラー情報があるかどうかを確認し、インストールが完了したら、次のコマンドを使用してgulpのバージョン番号を表示してgulpが正しくインストールされていることを確認できます.

gulp -v

次にgulpをプロジェクトローカルにインストールする必要があります

npm install —-save-dev gulp

ここでは、—-save-devを使用してpackage.jsonファイルを更新し、devDependencies値を更新して、プロジェクトがgulpに依存する必要があることを示します.Dependencies開発環境および生産環境におけるnodeモジュールの怠惰な関係を他の参加者に示すことができ、package.jsonドキュメントをより深く理解することができる.
ステップ5:Gulpfileファイルを新規作成しgulpを実行する
gulpをインストールしたら、どのタスクを実行するかを教えてください.まず、プロジェクトにどのタスクが必要かを自分で明らかにする必要があります.

Javascriptチェック

Sass(またはLessのような)ファイルのコンパイル

Javascriptのマージ

統合されたJavascriptを圧縮して名前を変更する

インストール依存

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev  

以上のコマンドでパーミッションエラーが発生した場合は、sudo再試行が必要です.
新規gulpfileファイル
コンポーネントのインストールが完了し、gulpfileファイルを新規作成してgulpがどのようなタスクを完了する必要があるかを指定する必要があります.
gulpには5つの方法しかありません.task、run、watch、src、およびdest、プロジェクトルートディレクトリにjsファイルを新規作成しgulpfile.jsと命名し、次のコードを貼り付けます.
gulpfile.js

//    gulp
var gulp = require('gulp'); 

//     
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

//     
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//   Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

//   ，    
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

//     
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    //       
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

次に、このコードをセグメント化して説明します.
コンポーネントの導入

var gulp = require('gulp'); 

var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

このステップでは,コアのgulpと他の依存コンポーネントを導入し,次にlint,sass,scripts,defaultの4つの異なるタスクを別々に作成する.
Lintタスク

gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Linkタスクでチェックjs/ディレクトリ下のjsファイルにエラーや警告がないかを確認します.
Sassタスク

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

Sassタスクは、scss/ディレクトリ下のscssファイルをコンパイルし、コンパイル済みのcssファイルを/cssディレクトリに保存します.
Scriptsタスク

gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

scriptsタスクはマージjs/ディレクトリの下にあるjsファイルをすべて取得してdist/ディレクトリに出力し、gulpはマージしたファイルの名前を変更・圧縮し、dist/ディレクトリにも出力します.
defaultタスク

gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

このとき,他のタスクに基づくdefaultタスクを作成した..run()メソッドを使用して、上記で定義したタスクを関連付けて実行します..watch()メソッドを使用して、指定したディレクトリのファイルの変更をリスニングします.ファイルの変更がある場合、コールバック定義の他のタスクが実行されます.
コマンドラインに戻るとgulpタスクを直接実行できます.

gulp

これは定義されたdefaultタスクを実行します.言い換えれば、以下のコマンド式と同じ意味です.

gulp default

もちろんgulpfile.jsで定義した任意のタスクを実行できます.たとえば、sassタスクを実行します.

gulp sass

(Kimi:わあ、かっこいいよね~)
終わりの言葉
gulpタスクを設定して実行し、前に勉強したことを振り返ってみましょう.

ノードのインストール環境を学んだ

簡易使用命令行の習得

コマンドラインでプロジェクトディレクトリに入ることを学んだ

npmとgulpのインストールを習った

gulpタスクの実行方法を学んだ

また、さらに学習するためのリファレンスリソースもあります.

npm上のgulpコンポーネント

gulpのGithubホームページ

公式パッケージ.jsonドキュメント

本文はhttp://travismaynard.com/writing/getting-started-with-gulp
http://segmentfault.com/a/1190000000372547