私は3つのgulpタスクを持っています:
最初のタスク - すべての jade ファイルを html にコンパイルし、bower.json からの wireep プラグインを使用してすべての css と js を挿入します
/* Compile jade templates to html files in app directory */
gulp.task('jade', function() {
gulp.src(config.path.dev.jade + '/index.jade')
.pipe(jade({
pretty: '\t'
}))
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./src'))
.pipe(notify(config.message.jadeCompiled))
});
タスク後の結果:
<!-- bower:js-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/nodernizr-dev/modernizr-latest.js"></script>
<!-- endbower-->
2 番目のタスク - bower.json から最新バージョンの jQuery を取得し、gulp-google-cdn プラグインで URL を変更します
/* Change JQuery from bower directory to Google CDN URL */
gulp.task('cdn', function () {
return gulp.src('./src/index.html')
.pipe(googlecdn(require('./bower.json')))
.pipe(gulp.dest('./dist'))
.pipe(notify(config.message.cdnComplete))
});
タスク後の結果:
<!-- bower:js-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bower_components/nodernizr-dev/modernizr-latest.js"></script>
<!-- endbower-->
3 番目のタスク - wireep プラグインを再度使用して、パスを本番環境に変更します
/* Normalize paths to production */
gulp.task('wiredep', function () {
return gulp.src('./dist/index.html')
.pipe(wiredep({
ignorePath: '../src/bower_components/',
exclude: 'jquery',
fileTypes: {
html: {
replace: {
js: '<script src="js/vendor/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="css/vendor/{{filePath}}" />'
}
}
}
}))
.pipe(gulp.dest('./dist'))
});
私はこの結果を持っています
<!-- bower:js-->
<script src="js/vendor/nodernizr-dev/modernizr-latest.js"></script>
<!-- endbower-->
しかし、そのような1つの文字列(私のGoogle CDN URL)を無視したい
<!-- bower:js-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/vendor/nodernizr-dev/modernizr-latest.js"></script>
<!-- endbower-->