知り合いの話と、開発中の問題をどのように解決したかを共有したいと思います。 この資料は、
nodejsに精通しており、
gulpに精通し
始めている人 、および同様の問題の解決策を探している人を対象としています。 名前が示すように、この記事は3つの章で構成されています。
最初に
ガルプとの知り合いは2ヶ月前に始まりました。しばらく失業中だったので、私はオフィスで仕事をすることを考え始めました。 欠員を監視したので、私はPHP開発者からフロントエンドに再訓練することにしました-経験と知識の利点により、これを迅速に行うことができました。 そして今、しばらくして、努力なしで、彼らは私を試用期間の間連れて行った。 私はこれをどうやってやったのか漠然と想像しますが、最初の日に仕事に来て、初めて聞いた言葉で両側にノートブックページを書き留めました...その日、私はウェブ開発者の時代に失われたことに気付きました。
エントリー
gulpを理解する過程での3つの問題について説明します。
- 労力をかけずにプロジェクトの圧縮（実稼働）バージョンと非圧縮バージョンをビルドする方法は？
- 変更が行われたときに、ブラウザーにプロジェクトを自動的に再起動させる方法は？
- コードでエラーが発生した場合に監視タスクがクラッシュしないように、コードでエラーをキャッチする方法は？
明確にするために、私は小さなプロジェクトを作成しました。
リンクを見ることができます。 現在の記事のアーカイブ
リンクから、
gulpfile.jsのすべてのバリエーションをダウンロードします。
プロジェクト構造：
gulpfile.habrahabr.webulla.ru/ - assets/ - - core/ - - - components/ - - - - woman.js - - - application.js - web/ - - assets/ - - index.html - gulpfile.js - package.json
作業
gulpfile.js 、記事で分析したソリューション（アーカイブ
-gulpfile-0-original.js ）で
補足します：
'use strict';
コンソールからプロジェクトを組み立てる：
gulp
ファイルの変更を追跡するタスクを起動する：
gulp watch
第1章-プロジェクトの圧縮（本番）バージョンと非圧縮バージョンのビルド
問題
コンパイルされた
application.jsのサイズを小さくするには、
gulp-uglifyパッケージを使用し
ます 。 問題は、jambsを検索し、非圧縮コードでコードをデバッグする方が（
gulp-uglifyを使用せずに）より便利だということです。 一般に、
gulpfile.jsで編集せずに、デバッグ用のプロジェクトの
非 圧縮バージョンと本番用の
圧縮バージョンの両方をビルドできるようにする方法は？
解決策
この解決策をどこで見つけたか覚えていませんが、私はそれが好きで、あなたと共有したいと思います。 コンソールから
gulpを起動するときに特定のフラグを渡すことで構成されます。
この実装では、次を使用しました。
まず、必要なすべてのパッケージをインストールしました。
npm install --save-dev yargs gulp-uglify gulp-if
gulpfile.jsの接続パッケージ：
var argv = require('yargs').argv; var gulpif = require('gulp-if'); var uglify = require('gulp-uglify');
スクリプトタスクにパイプを追加しました。
gulp.src(components.scripts.source) .pipe(browserify(components.scripts.options)) .pipe(gulpif(argv.production, uglify()))
この行を追加することは、次のコードと同等です。
var src = gulp.src(components.scripts.source) .pipe(browserify(components.scripts.options));
説明： argv.production == trueの場合 、
uglifyが適用されます。
次のコマンドを使用して、プロジェクトの
非圧縮バージョンをビルドします。
gulp
圧縮バージョンのアセンブリ：
gulp --production
if（argv.production）{...}他の場所で使用する条件。たとえば、本番用にスタイルを組み立てるとき。
結果
この章のソリューションで補完されたgulpfile.jsは
アーカイブ内にあり、
gulpfile-1-production.jsと呼ばれます。
第2章-変更後、ブラウザーのプロジェクトタブを自動的に再読み込みする
問題
ファイルに変更を加えた後、
gulpウォッチが実行されているたびに、プロジェクトは再構築されますが、プロジェクトのページはリロードされません。 クロムに切り替えて、プロジェクトタブを更新する必要があります。 ファイルに編集が加えられ、別の画面でプロジェクトのあるブラウザーウィンドウが新しいコードで自動的にリロードされる場合にそうするのが便利です。
解決策
gulp-livereloadパッケージ
と chromeの
livereload拡張機能でこの問題を解決しました。 この拡張機能は、他のブラウザでも利用できます：
http :
//livereload.com/ 。
必要なパッケージをインストールしました：
npm install --save-dev gulp-livereload
接続されたパッケージ：
var livereload = require('gulp-livereload');
watch：scriptsタスクにサーバー開始コマンドを追加しました：
スクリプトタスクにサーバーの再起動コマンドを追加しました。
gulp.src(components.scripts.source) .pipe(browserify(components.scripts.options)) .pipe(gulpif(argv.production, uglify())) .pipe(gulp.dest(components.scripts.dest)) .pipe(livereload());
gulp watchを開始しました：
gulp watch
chrome livereload拡張機能をインストールしました。 私のプロジェクトのWebフォルダが
gulpfile.habrahabr.ru.localで利用できるとしましょう。 ブラウザで開き、バーの[
LiveReloadを
有効にする ]ボタンをクリックして完了です。 監視タスクで監視されているファイルを保存するたびに、ブラウザページが自動的にリロードされます。
結果
アーカイブ内の更新された
gulpfile.jsは
gulpfile-2-livereload.jsです。
第3章-開発中にプロジェクトで犯した間違いの傍受
問題
プロジェクトスクリプトを間違えた場合、作業中のgulp監視タスクはコンパイルエラーで停止しました。 私はこれが起こらないようにしたかったので、グールプウォッチは動作し続けました。
解決策
私自身は、このような問題を解決しました。コンソールへのログ記録でエラーをキャッチするための別の関数を作成しました。
var error = function (e) { console.error('Error in plugin "' + e.plugin + '"'); console.error(' "' + e.message + '"'); console.error(' In file "' + e.fileName + '", line "' + e.lineNumber + '".'); console.log('--------------------------------------'); console.log(e); };
gulpスクリプトタスクにイベント処理を追加しました：
gulp.src(components.scripts.source) .pipe(browserify(components.scripts.options).on('error', error))
これで、コードを間違えた場合でも、コンソールに通知が表示され、gulp watchを再起動する必要はありません。
結果
アーカイブ内の更新された
gulpfile.jsは
gulpfile-3-error.jsです。
おわりに
この記事では、ドキュメンテーションを再説したり、何か革新的なことを伝えたりすることを望みませんでしたが、私の経験を一息つけ、重要な発見を共有しました。 すべてのドキュメントは、記事に示されているリンクから入手できます。
また、技術的な部分とテキストの両方について、経験豊富で知識のある人々の意見を聞きたいと思います。 私の考えを人々に伝える方法を学びたいです
:)ご清聴ありがとうございました！
例を参照してください 。
サンプルアーカイブをダウンロードします 。
記事への追加
2015年11月6日12時22分現在の更新エラー処理のために、 gulp-plumberがあります
アガティシェ