Gulp.jsでタスクを簡単に自動化

投稿日: 2022-04-20 2022-04-20

序章

開発者として、私たちはしばしば私たちが使用しているツールを見て、その仕事に適切なツールを使用しているかどうかを判断する必要があります。クリスは昨年初めにグラントについて素晴らしい記事を書きました。しかし、Gruntはあなたにぴったりではないかもしれません。

Gulp はストリーミングビルドシステムであり、ノードのストリームを使用することにより、ファイル操作はすべてメモリ内で行われ、指示があるまでファイルは書き込まれません。

Gruntと同じように、GulpはJavaScriptタスクランナーです。ただし、Gulpは設定より規約を優先します。タスクはコードで記述されているため、gulpはビルドフレームワークのように感じられ、特定のニーズに合ったタスクを作成するためのツールを提供します。

インストール

Gulpは簡単にインストールして実行できます。手順は次のとおりです。

Gulpをグローバルにインストールする
devDependenciesにGulpをインストールする
gulpfile.jsを作成します

最初のステップは、gulpをグローバルにインストールすることです。

npm install --global gulp

その後、それを使用したいプロジェクトのいずれかでdevDependenciesとしてgulpが必要になります。 package.jsonを手動で作成するか、npm initと入力して、作成したことを確認してください。 package.jsonを入手したら、次のコマンドを使用してdevDependenciesにgulpをインストールしましょう。

npm install --save-dev gulp

そして最後に、タスクを含むプロジェクトルートにgulpfile.jsが必要です。中間ステップとして、gulpユーティリティプラグインを追加して、実行されたことを視覚的に示す実行可能なタスクを作成します。

npm install --save-dev gulp-util

作成したgulpfile.jsファイルで、gulpが実行されていることをログに記録する単純なgulpfileを作成します。

gulpfile.js

    // grab our gulp packages
    var gulp  = require('gulp'),
        gutil = require('gulp-util');

    // create a default task and just log a message
    gulp.task('default', function() {
      return gutil.log('Gulp is running!')
    });

そして、すべてが期待どおりに進んだ場合、コマンドラインでgulpを実行すると、と同様の出力が得られるはずです。

gulp

Output    [12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js
    [12:32:08] Starting 'default'...
    [12:32:08] Gulp is running!
    [12:32:08] Finished 'default' after 1 ms

概要

このチュートリアルのディレクトリ構造

プロジェクトの構造を定義するには、おそらく1秒かかるはずです。この簡単なデモでは、次の構造を使用します。今のところ、ファイルは空白のままにしておくことができます。

    public/
      |  assets/
      |  |  stylesheets/
      |  |  |  style.css
      |  |  javascript/
      |  |  |  vendor/
      |  |  |  |  jquery.min.js
      |  |  |  bundle.js
    source/
      |  javascript/
      |  |  courage.js
      |  |  wisdom.js
      |  |  power.js
      |  scss/
      |  |  styles.scss
      |  |  grid.scss
    gulpfile.js
    packages.json

sourceは、作業を行うフォルダーです。 assets/style.cssは、source/scssでSASSファイルを処理して結合するときに、gulpによって作成されます。 bundle.jsファイルは、すべてのJSファイルを縮小して結合するときにgulpによって作成されます。

gulpの簡単な概要

Gulpはストリーミングビルドシステムです。そのストリーミングの性質により、プラグインによって操作または使用されているデータをパイプ処理して渡すことができます。プラグインはそれぞれ1つのジョブのみを実行することを目的としているため、単一のファイルを複数のプラグインに渡すことは珍しくありません。

gulp APIは、4つのトップレベル関数を含む非常に軽量です。彼らです

gulp.task
gulp.src
gulp.dest
gulp.watch

gulp.taskはタスクを定義します。その引数は、名前depsおよびfnです。

ここで、nameは文字列、depsはタスク名の配列、fnはタスクを実行する関数です。 Depsはオプションであるため、2つの形式のgulp.taskは次のとおりです。

    gulp.task('mytask', function() {
      //do stuff
    });

    gulp.task('dependenttask', ['mytask'], function() {
      //do stuff after 'mytask' is done.
    });

gulp.srcは、使用するファイルを指します。そのパラメータはグロブとオプションのオプションオブジェクトです。 .pipeを使用して、出力を他のプラグインにチェーンします。

gulp.destは、ファイルを書き込む出力フォルダーを指します。

単純にファイルをコピーするために使用されるgulp.srcおよびgulp.destは、次のようになります。

    gulp.task('copyHtml', function() {
      // copy any html files in source/ to public/
      gulp.src('source/*.html').pipe(gulp.dest('public'));
    });

gulp.taskのようなgulp.watchには、2つの主要な形式があります。どちらも、changeイベントを発行するEventEmitterを返します。最初のものは、グロブ、オプションのオプションオブジェクト、およびタスクの配列をパラメーターとして受け取ります。

    gulp.watch('source/javascript/**/*.js', ['jshint']);

簡単に言えば、globに一致するファイルのいずれかが変更されたら、タスクを実行します。上記のコードブロックで、source/javascriptサブフォルダー内の拡張子が.jsのファイルが変更されると、タスクjshintがそれらのファイルに対して実行されます。

2番目の形式は、glob、オプションのオプションオブジェクト、および変更が取得されたときに実行されるオプションのコールバックを取ります。

これをうなり声と比較することができます。うなり声には、時計機能を備えたセカンダリパッケージが必要です。 Gulpにはそれが組み込まれています。

詳細については、APIドキュメントを参照してください。

実際に役立つタスク。

それが実行されていることを私たちに伝えることができるのは素晴らしい仕事ですが、私たちのためにいくつかの実際の仕事をするために一口になってみましょう。

簡単なタスクから始めて、上に進んでいきます。

保存時のJSHint

最初のタスクでは、 jshint を使用してJavaScriptをリント（エラーをチェック）します。また、JavaScriptファイルを保存するたびにこのタスクを実行するように設定します。

まず、 gulp-jshint パッケージが必要です。これを、npmで取得します。また、出力を適切にフォーマットおよび色分けするには、jshintのレポーターが必要です。私たちもそれをつかみます。

npm install --save-dev gulp-jshint jshint-stylish

次に、lintタスクをgulpfileに追加します。

gulpfile.js

    // grab our packages
    var gulp   = require('gulp'),
        jshint = require('gulp-jshint');

    // define the default task and add the watch task to it
    gulp.task('default', ['watch']);

    // configure the jshint task
    gulp.task('jshint', function() {
      return gulp.src('source/javascript/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
    });

    // configure which files to watch and what tasks to use on file changes
    gulp.task('watch', function() {
      gulp.watch('source/javascript/**/*.js', ['jshint']);
    });

それでは、私たちが行ったことをステップスルーしてみましょう。

デフォルトのタスクを書き直して、監視タスクを依存関係として持つようにしました。これが意味するのは、

gulp

監視タスクを実行します。

それでは、新しいJSHintタスクを見てみましょう。 source/javascriptまたはそのサブディレクトリに存在する.jsファイルをソースします。したがって、source/javascript/carousel/main.jsのファイルも同様にタスク用に取得されます。次に、これらのファイルはgulp-jshintプラグインに渡され、スタイリッシュなレポーターに渡されてJSHintの結果が得られます。

このタスクを実行するには、次のようにします。

gulp jshint

超簡単！

では、その監視タスクについてはどうでしょうか。実際には簡単です。JavaScriptファイルのいずれかで変更が検出されると、JSHintタスクが実行されます。

libsassを使用したSassコンパイル

Sass は、CSSを拡張して、変数、ネストされたルール、ミックスイン、インラインインポートなどをサポートする方法として機能します。

Ken Wheelerは、ここで見つけることができるSassに関するすばらしい記事をすでに作成しています。

sassのコンパイルには、gulp-sassを使用します

ノート： gulp-sass uses node-sass which in turn uses libsass. On windows you’ll need to install Python 2.7.x and Visual Studio Express 2013 in order to compile libsass. Mac and Linux will use whatever gcc is available.

別の方法は、gulp-ruby-sassを使用することです。これは、代わりにルビーとサスジェムを使用します。

gulpfile.js

    var gulp   = require('gulp'),
        jshint = require('gulp-jshint'),
        sass   = require('gulp-sass');

    /* jshint task would be here */

    gulp.task('build-css', function() {
      return gulp.src('source/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/assets/stylesheets'));
    });

    /* updated watch task to include sass */

    gulp.task('watch', function() {
      gulp.watch('source/javascript/**/*.js', ['jshint']);
      gulp.watch('source/scss/**/*.scss', ['build-css']);
    });

gulp-sourcemapsを使用してソースマップを追加することもできます。ソースマップを使用したことがない場合は、処理、縮小、またはその他の変更されたファイルを元のソースにマップする優れた機能です。

gulp-sourcemapsをサポートするプラグインのリストは、ここにあります。

gulpfile.js

    var gulp       = require('gulp'),
        jshint     = require('gulp-jshint'),
        sass       = require('gulp-sass'),
        sourcemaps = require('gulp-sourcemaps');

    gulp.task('build-css', function() {
      return gulp.src('source/scss/**/*.scss')
        .pipe(sourcemaps.init())  // Process the original sources
          .pipe(sass())
        .pipe(sourcemaps.write()) // Add the map to modified source.
        .pipe(gulp.dest('public/assets/stylesheets'));
    });

JavaScriptの連結と縮小

多くのJavaScriptを使用する場合、通常、すべてをまとめる必要があるポイントに到達します。汎用プラグインgulp-concatを使用すると、これを簡単に実行できます。

さらに一歩進んでuglifyを実行し、ファイルサイズを大幅に小さくすることもできます。

さらに、本番用に構築しているかどうかに基づいて、条件付きでuglifyに適用します。

    gulp.task('build-js', function() {
      return gulp.src('source/javascript/**/*.js')
        .pipe(sourcemaps.init())
          .pipe(concat('bundle.js'))
          //only uglify if gulp is ran with '--type production'
          .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('public/assets/javascript'));
    });

概要

gulpの表面を引っかいただけです。 Gulpは、必要に応じて複雑または単純にすることができます。また、コードであるため、タスクとして必要なことはほぼすべて実行できます。

JavaScriptファイルをまとめるような単純なものから、保存時にS3バケットに自動的にデプロイするものまで。 Gulpは、必要なことをすばやく簡単に実行するためのツールを提供します。

getdocs

13036