Grunt初体验

记录初次使用grunt的步骤：

1：到https://nodejs.org/上下载安装node.js，本人环境为win10 64位系统，下载对应版本的node.js

2: 就像安装其他软件如photoshop一样，下一步下一步就好;

3:在最近安装列表中开启node.js命令行工具

4：安装grunt-cli:

5:进入到站点目录安装grunt 

6:在所在的站点中添加如下文件：

package.json：

{
  "name": "KTNW",
  "version": "1.0.4",
  "devDependencies": {
    
  }

}

当执行npm install 命令带上的--save-dev参数会写入上述package.json文件变成如下：

package.json：

{
  "name": "KTNW",
  "version": "1.0.4",
  "devDependencies": {    

    "grunt": "^1.0.2",
    "grunt-contrib-uglify": "^3.3.0",

    "grunt-contrib-watch": "^1.0.0"

  }

}

package.json这个文件记录了当前项目站点中依赖的grunt插件，当commit提交到源代码管控后，其他人员获取项目后，输入npm install , npm 会自动读取package.json中的文件，并下载文件中的插件到项目中，不用上传node_modules文件夹；

7：配置Gruntfile.js文件：

作用：告知grunt 命令加载哪些插件，执行什么样的动作：比如压缩Js css 检查js错误等；

此处的例子：

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        
        uglify: {
            options: {
                mangle: true,
                stripBanners: true,
                banner: '/*<%=pkg.name%>-<%=pkg.version%> Created: <%=grunt.template.today("yyyy-mm-dd")%> By:elie.yang*/',
                comments: 'false' 
            },
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'view/content/sourceScript', 
                    src: ['**/*.js'], 
                    dest: 'view/content/script' 
                },
                {
                    src: ['view/library/vpms.common.js'],
                    dest: 'view/library/vpms.common.min.js'
                 },
                {
                    src: ['view/library/vpms.core.js'],
                    dest: 'view/library/vpms.core.min.js'
                }
                ]
            }
        },
        watch:{
            build: {
                files: ['view/content/script/**/*.js'],
                tasks: ['uglify'],
                options: { spawn: false }
            }
        }      
       
    });
    //grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['uglify','watch']);
    //grunt.registerTask('minall', ['uglify:buildall']);
}

上面的例子是把view/content/sourceScipt下的所有js文件压缩后转移到view/content/script目录下，

本人的测试结构目录如下图：

8：再次执行grunt查看效果

看到了效果

9：开发时压缩js岂不是不利于调试吗？

此处项目特点为动态调用css和js只需要变更配置就可以恢复到sourceScript目录的引用js,下面红色部分脚本是关键所在。

var navigate = function (_link, options) {
        options = options || "";
        var _page = _link.substr(_link.lastIndexOf("/") + 1);
        vpms.core.loadFunction({
            url: "view/pages/" + _link,
            scrpts: [
                {
                    type: "style",
                    url: "view/content/css/{0}.css".format(_link)
                },
                {
                    type: "script",
                    url: "view/content/{0}/{1}.js".format(vpms.enviroment==="prod"?"script":"sourceScript",_link)
                }
            ],
         
            callback: function (responseText) {
                $("#mainframe").html(responseText);
                options = options || "null";
                var pageInit = "if (vpms.{0}) vpms.{0}.init(vpms.main,'{1}');".format(_page, options);
                
                eval(pageInit);
            }
        });

    }  

10：本人的grunt使用初体验，看起来运行正常还很顺利，记录于此，供日后反哺！