自動化構建工具 grunt [國外使用較多]

時間  2019-12-11
標籤 自動化 構建 工具 grunt 使用 較多 欄目 測試自動化 简体版
原文   原文鏈接

Gruntjavascript

代碼： https://github.com/RyenToretto/grunt-gulp-webpackcss

環境： node 版本 > 0.8html

特色： java

自動化： 壓縮、合併、編譯等等操做，前提是 Gruntfile.js 文件配置好了node

Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的webpack

grunt 插件： grunt 做爲大腦，指揮插件們工做git

contrib-官方維護的插件es6

 

項目結構： github

1. 全局安裝 grunt 腳手架 命令行接口 grunt-cliweb

sudo npm install -g grunt-cli

調用與 Gruntfile.js 在同一目錄中 Grunt

2. 局部安裝 grunt

sudo npm install --save-dev grunt

每次運行grunt 時，他就利用node提供的require()系統查找本地安裝的 Grunt。

正是因爲這一機制，你能夠在項目的任意子目錄中運行 grunt，更多詳情請閱讀源碼

3. 編輯 Gruntfile.js

  • 在下面列出的這個 Gruntfile.js 中

package.json 文件中的項目元數據（metadata）被導入到 Grunt 配置中

 grunt-contrib-uglify 插件中的 uglify 任務（task）被配置爲壓縮（minify）源碼文件

並依據上述元數據動態生成一個文件頭註釋。

當在命令行中執行 grunt 命令時，uglify 任務將被默認執行。

commonJS 模塊化語法 暴露

  • module.exports = function(grunt) {

  // 初始化配置 grunt 任務.
  grunt.initConfig({
  });

  // 當 grunt 執行時，要加載的插件。
  // grunt.loadNpmTasks('');

  // 註冊 構建任務 列表。
  grunt.registerTask('default', []); // 默認任務，依賴爲 []
};

4. 加入 合併 js 的插件 grunt-contrib-concat 

(1) sudo npm install --save-dev grunt-contrib-concat

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任務.
    grunt.initConfig({
        concat: {
            options: {
                separator: ';', // 鏈接符, 兩個 js 文件之間 以 ; 鏈接
            }, // 選項
            dist: {
                src: ['src/js/*.js'], // 要合併的 源文件
                dest: 'dist/built.js', // 輸出到的 新文件
            }, // 合併
        }, // 執行任務的任務名
    });

    // 當 grunt 執行時，要加載的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');

    // 註冊 構建任務 列表。
    grunt.registerTask('default', []); // 默認任務，依賴爲 []

};

(3) 執行 concat 任務

grunt concat

(4) 科學的 Gruntfile.js打包路徑： 

(5) index.html 調用下 js 看看效果

  • <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="shortcut icon" href="https://img-yunzhi.cdn.bcebos.com/yz-favicon.ico" />
    <link rel="bookmark" href="https://img-yunzhi.cdn.bcebos.com/yz-favicon.ico" type="image/x-icon" />
    <title>自動化構建 - grunt</title>

    <script type="text/javascript" src="./static/js/fastclick.js"></script>
  </head>
  <body>
    <div id="app"></div>




    <script type="text/javascript">
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
      if(!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
      }    /* 解決點擊響應延時 0.3s 問題 */
    </script>
    <script type="text/javascript" src="./build/js/build.js"></script>
  </body>
</html>

5. 加入 壓縮 js 的插件 grunt-contrib-uglify , 註冊自動化任務數組

(1) sudo npm install --save-dev grunt-contrib-uglify 

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任務.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 鏈接符, 兩個 js 文件之間 以 ; 鏈接
            }, // 選項
            dist: {
                src: ['src/js/*.js'], // 要合併的 源文件
                dest: 'build/js/build.js', // 輸出到的 新文件
            }, // 合併
        }, // concat 執行 合併任務 的任務名
        uglify: {
            options: {
                // 壓縮文件的 頂部註釋
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        } // uglify 執行 壓縮任務 的任務名
    });

    // 當 grunt 執行時，要加載的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 註冊 構建任務 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify'
    ]); // 默認任務，依賴爲 [], 執行 'grunt default' / 'grunt' 後，會順序執行數組裏的任務
};

(3) 執行 grunt 

6. 默認任務的 數組，會同步，順序執行，因此前後順序很重要

7. 加入 js-hint 語法檢查插件

(1) sudo npm install --save-dev grunt-contrib-jshint

(2) 建立並配置 .jshintrc 文件

  • {
    "curly": true,
    "eqeqeq": true,
    "eqnull": true,
    "expr": true,
    "immed": true,
    "newcap": true,
    "noempty": true,
    "noarg": true,
    "regexp": true,
    "browser": true,
    "devel": true,
    "node": true,
    "boss": false,

    "undef": true,
    "asi": false,
    "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}

(3) 配置 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任務.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 鏈接符, 兩個 js 文件之間 以 ; 鏈接
            }, // 選項
            dist: {
                src: ['src/js/*.js'], // 要合併的 源文件
                dest: 'build/js/build.js', // 輸出到的 新文件
            }, // 合併
        }, // concat 執行 合併任務 的任務名
        uglify: {
            options: {
                // 壓縮文件的 頂部註釋
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }, // uglify 執行 壓縮任務 的任務名
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定檢查的文件
        },
    });

    // 當 grunt 執行時，要加載的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // 註冊 構建任務 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify',
        'jshint'
    ]); // 默認任務，依賴爲 [], 執行 'grunt default' / 'grunt' 後，會順序執行數組裏的任務
};

(4) 構建

grunt

8. 加入 合併壓縮 css 的插件

(1) sudo npm install --save-dev grunt-contrib-cssmin

(2) 配置 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任務.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 鏈接符, 兩個 js 文件之間 以 ; 鏈接
            }, // 選項
            dist: {
                src: ['src/js/*.js'], // 要合併的 源文件
                dest: 'build/js/build.js', // 輸出到的 新文件
            }, // 合併
        }, // concat 執行 合併任務 的任務名
        uglify: {
            options: {
                // 壓縮文件的 頂部註釋
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }, // uglify 執行 壓縮任務 的任務名
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定檢查的文件
        }, // 語法檢查插件
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        } // css 合併壓縮插件
    });

    // 當 grunt 執行時，要加載的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 註冊 構建任務 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify',
        'jshint',
        'cssmin'
    ]); // 默認任務，依賴爲 [], 執行 'grunt default' / 'grunt' 後，會順序執行數組裏的任務
};

(3) 構建

grunt

9. 實現 watch 監視文件修改任務，實現自動打包編譯

(1) sudo npm install --save-dev grunt-contrib-watch

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任務.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 鏈接符, 兩個 js 文件之間 以 ; 鏈接
            }, // 選項
            dist: {
                src: ['src/js/*.js'], // 要合併的 源文件
                dest: 'build/js/build.js', // 輸出到的 新文件
            }, // 合併
        }, // concat 執行 合併任務 的任務名
        uglify: {
            options: {
                // 壓縮文件的 頂部註釋
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }, // uglify 執行 壓縮任務 的任務名
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定檢查的文件
        }, // 語法檢查插件
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        }, // css 合併壓縮插件
        watch : {
            scripts : {
                files : ['src/js/*.js', 'src/css/*.css'],
                tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
                options : {spawn : false}//增量更新---全量更新
            }
        }
    });

    // 當 grunt 執行時，要加載的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 註冊 構建任務 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify',
        'jshint',
        'cssmin'
    ]); // 默認任務，依賴爲 [], 執行 'grunt default' / 'grunt' 後，會順序執行數組裏的任務
    grunt.registerTask('build', ['default']);
    grunt.registerTask('dev', ['default', 'watch']);
};

(3) grunt dev

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程