5

Grunt では、 envというプラグインを使用していました。これにより、特定のビルドで環境を定義できます。私は3つのビルドを持っていました。1 つは、個別に分割されたすべてのファイルを使用する DEV でした。PROD はすべてを連結し、RELEASE は連結して醜くします。私はGulpで同じことをしようとしています。Gulp のプリプロセッサはありますが、環境を定義するものは何もありません。

質問は。私に何ができる？明らかに、常にすべての JS ファイルを定義したくはありません。また、異なるスクリプト タグを持つ 3 つの異なる HTML ページも必要ありません。

私のHTMLには、次のようなものがあります。

<!-- @if NODE_ENV == 'DEVELOPMENT' -->
<script src="js/example1.js" type="text/javascript"></script>
<script src="js/example2.js" type="text/javascript"></script>
<script src="js/example3.js" type="text/javascript"></script>
<!-- @endif -->

<!-- @if NODE_ENV == 'PRODUCTION' -->
<script src="js/project.js" type="text/javascript"></script>
<!-- @endif -->

<!-- @if NODE_ENV == 'RELEASE' -->
<script src="js/project.min.js" type="text/javascript"></script>
<!-- @endif -->

そして、私のうなり声のプラグインは次のようになります。

env: {
    dev: {
        NODE_ENV: 'DEVELOPMENT'
    },
    prod: {
        NODE_ENV: 'PRODUCTION'
    },
    release: {
        NODE_ENV: 'RELEASE'
    }
},
preprocess: {
    options: {
        context: {
            name: '<%= pkg.outputName %>',
            version: '<%= pkg.version %>',
            port: '<%= pkg.port %>'
        }
    },
    dev: {
        src: 'index.html',
        dest: '<%= pkg.outputFolder %>/index.html'
    },
    prod: {
        src: 'index.html',
        dest: '<%= pkg.outputFolder %>/index.html'
    },
    release: {
        src: 'index.html',
        dest: '<%= pkg.outputFolder %>/index.html'
    }
},
4

2 に答える 2

1

これが、あなたが望むと思うことをどのように達成したかです。前処理する html ページを含むフォルダーを設定しました。

そのフォルダー内には、html フラグメントと json ファイルを保存する各ページに対応するフォルダーがあります。

各 JSON ファイルには、特定のページのページ アセットを定義する変数があります。

たとえば、私のページが index.html だとします。次のようになります。

<html>
    <head>
         ... Meta stuff title etc ...
         <!-- @ifdef pagecss1 -->
         <link href="<!-- @echo pagecss1 -->" rel="stylesheet">
         <!-- @endif  -->
         <!-- @ifdef pagecss2 -->
       <link href="<!-- @echo pagecss2 -->" rel="stylesheet">
         <!-- @endif  -->
    </head>
       /// so on - same stuff with scripts at bottom

そのページの JSON ファイルでは、pagecss1定義するかどうかのどちらかです。

次に、gulp.watch を使用します。

すべてを書き出すつもりはありませんが、結果として、サブフォルダー内のファイルが変更されるたびに、関数が既存のグローバル コンテキスト変数をインターセプトし、そのページの JSON ファイルを読み取ります。次にnode.util._extend、変数をページ固有の変数で上書きします。次に、変更されたオブジェクトをコンテキストとしてプリプロセッサ タスクに渡します。それはすべて非常に迅速で、リロードするページを livereload が認識しているコールバックを返します。

これはモバイルで書いたので、わかりやすくするために編集に戻ってくるかもしれませんが、このなぞなぞを解決することで、信じられないほどの時間と労力を節約できました。

于 2014-06-06T18:41:43.460 に答える