Gruntjs: grunt-usemin使用心得

本文轉載自查看原文 2014-03-10 00:00 3667 工具/ HTML/ javascript/ Gruntjs

grunt-usemin：

Replaces references to non-optimized scripts or stylesheets into a set of HTML files

usemin exports 2 different tasks:

useminPrepare prepares the configuration to transform specific construction (blocks) in the scrutinized file into a single line, targeting an optimized version of the files
usemin replaces the blocks by the file they reference, and replaces all references to assets by their revisioned version if it is found on the disk. This target modifies the files it is working on.

Usually, useminPrepare is launched first, then the steps of the transformation flow (for example, concat, uglify, and cssmin), and then, in the end usemin is launched.

我的工作目錄

workspace/

　　——app/

　　　　——js/

　　　　——tpl/

Gruntfile.js配置

 1 module.exports = function(grunt) {
 2 
 3     // Project configuration.
 4     grunt.initConfig({
 5 
 6         useminPrepare: {
 7             html: ['app/tpl/**/*.html'],
 8             options: {
 9                 // 測試發現這里指定的dest，是usemin引入資源的相對路徑的開始
10                 // 在usemin中設置assetsDirs，不是指定的相對路徑
11                 // List of directories where we should start to look for revved version of the assets referenced in the currently looked at file
12                 dest: 'build/tpl'               // string type                 
13             }
14         },
15         usemin: { 
16             html: ['build/tpl/**/*.html'],      // 注意此處是build/
17             options: {
18                 assetsDirs: ['build/js']
19             }
20         },
21         copy: {
22             html: {
23                 expand: true,                   // 需要該參數
24                 cwd: 'app/',
25                 src: ['tpl/**/*.html'],         // 會把tpl文件夾+文件復制過去
26                 dest: 'build'
27             }
28         } 
29 
30     });
31 
32   grunt.loadNpmTasks('grunt-contrib-uglify');
33   grunt.loadNpmTasks('grunt-contrib-copy');
34   grunt.loadNpmTasks('grunt-contrib-concat');
35   grunt.loadNpmTasks('grunt-usemin');
36 
37   // 最后就是順序了，沒錯concat,uglify在這里哦！
38   grunt.registerTask('default', [
39       'copy:html',
40       'useminPrepare',
41       'concat:generated',
42       'uglify:generated',
43       'usemin'
44   ]);
45 
46 };

源html結構

<body>
    <p>this is a grunt usemin</p>

    <script src="../js/globle.js"></script>
    
    <!-- build:js ../js/page.js -->
    <script src="../js/libs.js"></script>
    <script src="../js/page.js"></script>
    <!-- endbuild -->
</body>

打包后的html

<body>
    <p>this is a grunt usemin</p>

    <script src="../js/globle.js"></script>
    
    <script src="../js/page.js"></script>
</body>

感謝gruntjs,yeoman

https://github.com/yeoman/grunt-usemin

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 grunt之filerev、usemin Fiddler使用心得 HTMLayout使用心得 jeecg使用心得 Docear使用心得 Less使用心得 Bootstrap使用心得 webstorm使用心得 BeanPostProcessor使用心得 Painter的使用心得