webapp generator gulpを使用して非縮小生産コードを構築するにはどうすればよいですか？

Question

私はwebappジェネレータでプロジェクトを足場に乗せました。このプロジェクトはlocalhostでしか動作しませんが、ファイルスキームでブラウザに直接ファイルを開いた場合は動作しません。 URL http://localhost:9000/はappフォルダのindex.htmlファイルを開きますが、http://localhost:9000/styles/main.cssはapp../.tmp/styles/main.cssを開きます。 localhostが実際にウィンドウバーに開かれたパスを使わずに1つのディレクトリに戻ってしまうのはかなり夢中です。これが原因で発生した問題は、index.htmlがローカルホストでのみbower_componnets/example.cssフォルダを使用していることです。ファイルスキームでは、アプリケーション内にbower_componentsフォルダは存在しません。だから私はローカルホストなしでappフォルダを使用することはできません。

現実的な問題は、バックエンドの開発者が動的なコードを作成するために使用するサーバー上に静的なWebページのデモをアップロードする必要があることです。今はローカルホスト上でのみ動作するため、アプリケーションフォルダをアップロードできません。 gulp buildと私はdistファイルスキームで動作するフォルダを取得しますが、それはすべて縮小され、cdnを使用しません。バックエンドの開発者は、縮小されたhtmlを使用することはできません。

私は2日間を無駄にしています。タスクを自動化することで時間が短縮されると思っていましたが、コードに集中的に焦点を当てます。しかし、それは私が実際の仕事から完全に焦点を失ってしまったことです。そして、私はバワー、npm、gulpで1時間ごとにxyz問題を修正することに集中しています。代わりに私はプラグインのcdnをダウンロードしたり見つけたりするために5分を費やして、私のコードに手動で含めて2日間保存しました。だからgulp bowerは2日間の作業に5分間働かせます。どのような素晴らしいツール。まあ..質問は：

1. webappジェネレータgulpのdistフォルダに似ていない非生産コードをビルドするにはどうすればいいですか？

---

編集私の一時的な解決策：

私たちは私たちのプロジェクトのためにunminifiedのHTML、CSSやJSファイルを必要に応じて、私はdistに似demoフォルダを生成するために、ゴクゴクファイルに新しいタスクを追加しました。私はdistタスクをコピーしてgulp.src('dist/**/*')をgulp.src('demo/**/*')に変更するだけです。このタスクでは、スタイルとjsフォルダにファイルを生成するために、.pipe(gulp.dest('demo'))を.pipe(gulp.dest('dist')); });の場所に追加しました。また、gulpがminifyタスクを使用する前に、.pipe(gulp.dest('demo')); });を置くよう気をつけました。ここでは、関連するgulp.jsコードは次のとおりです。

// some code here 

gulp.task('html', ['styles', 'scripts'],() => { 
    return gulp.src('app/*.html') 
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) 
    .pipe(gulp.dest('demo')) // I added my code here 
    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}}))) 
    .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false}))) 
    .pipe($.if(/\.html$/, $.htmlmin({  
     collapseWhitespace: true, 
     minifyCSS: true, 
     minifyJS: {compress: {drop_console: true}}, 
     processConditionalComments: true, 
     removeComments: true, 
     removeEmptyAttributes: true, 
     removeScriptTypeAttributes: true, 
     removeStyleLinkTypeAttributes: true  
    }))) 
    .pipe(gulp.dest('dist')); 
}); 

gulp.task('images',() => { 
    return gulp.src('app/images/**/*') 
    .pipe($.cache($.imagemin())) 
    .pipe(gulp.dest('demo/images')) // I added this 
    .pipe(gulp.dest('dist/images')); 
}); 

gulp.task('fonts',() => { 
    return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) 
    .concat('app/fonts/**/*')) 
    .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts'), gulp.dest('demo/fonts')) ); // I added demo here too 
}); 

gulp.task('extras',() => { 
    return gulp.src([ 
    'app/*', 
    '!app/*.html' 
    ], { 
    dot: true 
    }).pipe(gulp.dest('dist')).pipe(gulp.dest('demo')); // I added this 
}); 

gulp.task('clean', del.bind(null, ['.tmp', 'dist', 'demo'])); // I added demo here 

//some code here 


/*New Custom tasks*/ 

gulp.task('demo-build', ['lint', 'html', 'images', 'fonts', 'extras'],() => { 
    return gulp.src('demo/**/*'); 
}); 

は、残念ながら、私は1つの vendor.js/cssのファイルにすべてのCSSファイルやJSファイルを連結がぶ飲みを停止するには、いくつかを見つけるcouln't。また、ローカルプラグインをcdnに置き換える方法も見つけられませんでした。

私は非常によく学んだことの一つです。 npm、gulpなどはフロントエンド開発者のためのものではありません。彼らはnodeJsの開発者向けです。 5分で実行できるタスクは5時間かかる。しかし、明らかに、nodejsの開発者は、必要に応じてこれらのプラグインをカスタマイズできるので、この恩恵を受ける可能性があります。

Answer 1

gulpfile.jsを開き、htmlタスクを見つけます。あなたはindex.html unminifiedが表示され、ブロックが再度がぶ飲みを実行し

.pipe($.if('/\.html$/', $.htmlmin({ 

    // ... 
    // many options 
    // ... 

}))) 

コメント：あなたはこのブロックが表示されるはずです。