如何從index.html的使用咕嚕usemin

我的index.html如下已經分裂js文件創建多個js文件：如何從index.html的使用咕嚕usemin

<head> 
    .... 
    <!-- build:js js/app1.min.js --> 
    <!-- js from lib --> 
    <script src="bower_components/angular/angular.min.js"></script> 
    <script src="bower_components/angular-route/angular-route.min.js"></script> 

    <!-- js of this app --> 
    <script src="js/app.js"></script> 
    <script src="js/services.js"></script> 

    <!-- external js --> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <!-- endbuild --> 
    .... 
</head> 

..... 
<body> 
... 
    <!-- build:js js/app2.min.js --> 

    <!-- js from lib --> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <!-- angular-animate provides search functionality --> 

    <!-- js of this app -->  
    <script src="js/filters.js"></script> 
    <script src="js/directives.js"></script> 

    <!-- endbuild --> 
    .... 
</body>

正如你所看到的，我試圖用兩套js文件。分手的原因是表現。在這種情況下如何使用usemin。我嘗試以下方法：

'useminPrepare': { 
    'html': 'app/index.html' 
}, 

'usemin': { 
    'html': ['dist/index.html'] 
},

但是，沒有創建文件夾/文件。但在index.html中，這兩個部分被app1.min.js和app2.min.js正確替換。

此外，我不明白所有示例都使用concat和uglify結合使用usemin的一件事。 index.html中的文件已經是* .min.js，例如。包含在bower_components文件夾中的文件，它們會發生什麼？

來源

2015-05-09 Rahul Kumar

除非您已經大量投資grunt，否則請給gulp一下。

以下是gulpfile.js的摘要。 gulp.src()函數獲取文件列表，然後通過轉換對它們進行管道操作，最後以文件列表結尾，文件列表將以gulp.dest()寫入磁盤。

這讓我們前面兩塊代碼src，transform（minify，concat等），並寫入js和css。

最後一塊代碼src（）是index.html，從前兩個塊注入文件名，並將index.html寫入構建文件夾。我在做一些建議諮詢。

這裏是你如何做到這一點的一飲而盡：

// Vendor files are pre-minified. Get right versions. 
    // JS. Concat, and add revision if necessary 
    var srcJs = config.minify ? config.dashboard.vendorJsMin : config.dashboard.vendorJs; 
    var destJs = 'vendor' + (config.minify?'.min':'') + '.js'; 
    var vendorJs = gulp.src(srcJs) 
    .pipe(plugins.if(config.concat, plugins.concat(destJs))) 
    .pipe(plugins.if(config.hash, plugins.hash())) 
    .pipe(gulp.dest(config.dashboard.dest + '/js')) 

    // Vendor files are pre-minified. Get right versions. 
    // CSS. Concat, and add revision if necessary 
    var srcCss = config.minify ? config.dashboard.vendorCssMin : config.dashboard.vendorCss; 
    var destCss = 'vendor' + (config.minify?'.min':'') + '.css'; 
    var vendorCss = gulp.src(srcCss) 
    .pipe(plugins.if(config.concat, plugins.concat(destCss))) 
    .pipe(plugins.if(config.hash, plugins.hash())) 
    .pipe(gulp.dest(config.dashboard.dest + '/css')) 

    // Inject all these files into index.html 
    return gulp.src(config.dashboard.index) 
    .pipe(plugins.plumber()) 
    .pipe(plugins.inject(vendorJs, _.merge({name: 'vendor'}, config.dashboard.injectOptions))) 
    .pipe(plugins.inject(vendorCss, _.merge({name: 'vendor'}, config.dashboard.injectOptions))) 
    .pipe(plugins.inject(appJs, _.merge({name: 'app'}, config.dashboard.injectOptions))) 
    .pipe(plugins.inject(appCss, _.merge({name: 'app'}, config.dashboard.injectOptions))) 
    .pipe(plugins.inject(templates, _.merge({name: 'templates'}, config.dashboard.injectOptions))) 
    .pipe(plugins.replace('REPLACE_NODE_ENV', config.NODE_ENV)) 
    .pipe(gulp.dest(config.dashboard.dest))

這是一個更加「開發」就像構建系統比咕嚕。 Grunt更像'ops'。無論什麼效果最好的是使用！

來源

2015-05-10 02:44:36

如何從index.html的使用咕嚕usemin

回答

相關問題