grunt快速入门

安装 CLI

在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。

拿一份现有的 Grunt 项目练手

假定Grunt CLI已经正确安装，并且已经有一份配置好package.json 和 Gruntfile 文件的项目了，接下来就很容易拿Grunt练手了：

将命令行的当前目录转到项目的根目录下。
执行npm install命令安装项目依赖的库。
执行 grunt 命令。
OK，就是这么简单。还可以通过grunt --help命令列出所有已安装的Grunt任务（task），但是一般更建议去查看项目的文档以获取帮助信息。

Available tasks
        uglify  Minify files with UglifyJS. *
        cssmin  Minify CSS *
       htmlmin  Minify HTML *
        jshint  Validate files with JSHint. *
         watch  Run predefined tasks whenever watched files change.
         clean  Clean files and folders. *
          copy  Copy files. *
        concat  Concatenate files. *
       html2js  Compiles Angular-JS templates to JavaScript. *
       filerev  File revisioning based on content hashing *
        usemin  Replaces references to non-minified scripts / stylesheets *
 useminPrepare  Using HTML markup as the primary source of information *
       publish  Alias for "clean:resource", "clean:view", "clean:framework",
                "copy:resource", "copy:framework", "html2js", "concat",
                "copy:view", "usemin" tasks.
       default  Alias for "publish" task.

实战使用ngtemplates例子

module.exports = function(grunt) {
    grunt.initConfig({
        // 清理空文件夹
        clean: {
            foo1: {
                src: ['dist/*']
            }
        },
        ngtemplates: { // 将angular中html模板通过$templateCache进行合并
            'angular-my-directives': {
                options: {
                    htmlmin: {
                        collapseBooleanAttributes: true,
                        collapseWhitespace: true,
                        removeAttributeQuotes: true,
                        removeComments: true, // Only if you don't use comment directives!
                        removeEmptyAttributes: true,
                        removeRedundantAttributes: true,
                        removeScriptTypeAttributes: true,
                        removeStyleLinkTypeAttributes: true
                    },
                    standalone: true, // 是否创建新的Angular模块
                    module: 'temp', // 设置创建的Angular模块名字，默认值为target,即'angular-my-directives'
                    // bootstrap: function (module, script) {
                    //     console.log(script);
                    //     return script;
                    // },
                    prefix: '/aa/'
                },
                src: 'src/**/*.html', // where my view files are
                dest: 'dist/tmp.js' // single file of $templateCache
            }
        },
    });

    grunt.loadNpmTasks('grunt-angular-templates');
    grunt.loadNpmTasks('grunt-contrib-clean');

    // 默认被执行的任务列表。
    grunt.registerTask('default', [
        'clean',
        'ngtemplates'
    ]);

};

grunt-angular-templates
AngularJS中使用单独HTML模板文件的地方非常多，例如：自定义指令、ng-include、templateUrl等。通常这些文件都是独立的html文件，AngularJS中使用这些文件都是通过文件路径地址引用的。
当用Grunt打包压缩整个项目时，如何处理这些html模板文件呢？本文讲的grunt-angular-templates插件可以解决该问题。
grunt-angular-templates插件的基本原理：
该插件实际使用的是AngularJS的$templateCache服务，将这些模板文件都缓存起来，当自定义指令、ng-include等需要对应的html文件时，AngularJS首先会去$templateCache中找对应的文件，如果找到了就不在发送XHR请求。
使用$templateCache缓存模板可以减少XHR请求数，并实现html文件打包。
同时，在AngularJS内部，第一次请求到模板HTML后，都会被缓存到$templateCache服务中，这样就确保一个文件只被请求一次。

参考文章

https://www.gruntjs.net/using-the-cli
https://www.jianshu.com/p/92f6e753eb44
https://www.cnblogs.com/zhaoweikai/p/9723827.html

最后编辑于：2019.08.15 13:49:36