Gulp：制作プロジェクト、Livereloadの開始、エラーキャプチャの作成方法

知り合いの話と、開発中の問題をどのように解決したかを共有したいと思います。 この資料は、 nodejsに精通しており、 gulpに精通し始めている人 、および同様の問題の解決策を探している人を対象としています。 名前が示すように、この記事は3つの章で構成されています。

最初に

ガルプとの知り合いは2ヶ月前に始まりました。しばらく失業中だったので、私はオフィスで仕事をすることを考え始めました。 欠員を監視したので、私はPHP開発者からフロントエンドに再訓練することにしました-経験と知識の利点により、これを迅速に行うことができました。 そして今、しばらくして、努力なしで、彼らは私を試用期間の間連れて行った。 私はこれをどうやってやったのか漠然と想像しますが、最初の日に仕事に来て、初めて聞いた言葉で両側にノートブックページを書き留めました...その日、私はウェブ開発者の時代に失われたことに気付きました。

エントリー

gulpを理解する過程での3つの問題について説明します。

1. 労力をかけずにプロジェクトの圧縮（実稼働）バージョンと非圧縮バージョンをビルドする方法は？
2. 変更が行われたときに、ブラウザーにプロジェクトを自動的に再起動させる方法は？
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 var gulp = require('gulp'); var browserify = require('gulp-browserify'); //     var rootDir = '.'; var sourceDir = rootDir + '/assets'; //     var destDir = rootDir + '/web/assets'; //      //     //       //     scripts   var components = { scripts: { source: sourceDir + '/core/application.js', dest: destDir, watch: sourceDir + '/core/**/*.js', options: { paths: ['./node_modules', sourceDir], debug: false, fullPaths: true } } }; //     gulp.task('scripts', function () { gulp.src(components.scripts.source) .pipe(browserify(components.scripts.options)) .pipe(gulp.dest(components.scripts.dest)); }); //        gulp.task('watch:scripts', ['scripts'], function () { //    ,     gulp.watch(components.scripts.watch, ['scripts']); }); gulp.task('default', ['scripts']); gulp.task('watch', ['watch:scripts']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンソールからプロジェクトを組み立てる：

 gulp
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルの変更を追跡するタスクを起動する：

 gulp watch
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

第1章-プロジェクトの圧縮（本番）バージョンと非圧縮バージョンのビルド

問題

コンパイルされたapplication.jsのサイズを小さくするには、 gulp-uglifyパッケージを使用します 。 問題は、jambsを検索し、非圧縮コードでコードをデバッグする方が（ gulp-uglifyを使用せずに）より便利だということです。 一般に、 gulpfile.jsで編集せずに、デバッグ用のプロジェクトの非 圧縮バージョンと本番用の圧縮バージョンの両方をビルドできるようにする方法は？

解決策

この解決策をどこで見つけたか覚えていませんが、私はそれが好きで、あなたと共有したいと思います。 コンソールからgulpを起動するときに特定のフラグを渡すことで構成されます。

 #  uncompressed  gulp #  compressed  gulp --production
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この実装では、次を使用しました。

• コマンド引数にアクセスするyargsパッケージ。
• プロジェクトコードを圧縮するためのgulp-uglifyパッケージ 。
• 必要な場合にのみgulp-uglifyを実行するgulp -ifパッケージ。

まず、必要なすべてのパッケージをインストールしました。

 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())) // <-     .pipe(gulp.dest(components.scripts.dest));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この行を追加することは、次のコードと同等です。

 var src = gulp.src(components.scripts.source) .pipe(browserify(components.scripts.options)); // ,    production if(argv.production) { src.pipe(uglify()); } src.pipe(gulp.dest(components.scripts.dest));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

説明： 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タスクにサーバー開始コマンドを追加しました：

  //   livereload.listen();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スクリプトタスクにサーバーの再起動コマンドを追加しました。

 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監視タスクはコンパイルエラーで停止しました。 私はこれが起こらないようにしたかったので、グールプウォッチは動作し続けました。

解決策

私自身は、このような問題を解決しました。コンソールへのログ記録でエラーをキャッチするための別の関数を作成しました。

 /** *  . * @param e */ 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)) // <-  .on('error', error)    .pipe(gulpif(argv.production, uglify())) .pipe(gulp.dest(components.scripts.dest)) .pipe(livereload());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、コードを間違えた場合でも、コンソールに通知が表示され、gulp watchを再起動する必要はありません。

結果

アーカイブ内の更新されたgulpfile.jsはgulpfile-3-error.jsです。

おわりに

この記事では、ドキュメンテーションを再説したり、何か革新的なことを伝えたりすることを望みませんでしたが、私の経験を一息つけ、重要な発見を共有しました。 すべてのドキュメントは、記事に示されているリンクから入手できます。



また、技術的な部分とテキストの両方について、経験豊富で知識のある人々の意見を聞きたいと思います。 私の考えを人々に伝える方法を学びたいです:)ご清聴ありがとうございました！



例を参照してください 。

サンプルアーカイブをダウンロードします 。

記事への追加

2015年11月6日12時22分現在の更新

エラー処理のために、 gulp-plumberがあります

アガティシェ