初识GruntJS个人感悟

最近在git上看到一个很有意思的项目，扒下来看了看，用Grunt.js来打包的。

这个项目代码正常运行不打包的话，源码都是暴露在外面的，公司竞争对手偏多，最起码的压缩还是要有的吧。

于是顺便研究了一下这个打包工具怎么用，接触的第一个打包工具是webpack，确实是webpack更好用一些吧。

不过webpack更适合于中大型的项目，grunt更适合小型的项目（纯属个人理解）。

学习grunt的方法直接看这个吧grunt中文教程，非常简单易懂。

学习使用：

1. 安装gruntjs

全局安装：npm install -g grunt-cli 

项目中使用grunt：npm install grunt --save-dev

2.创建项目并使用

首先项目 中要有一个package.json和一个Gruntfile.js好的这就够了。注意Gruntfile.js开头字母要大写。

3. 在Gruntfile.js里面写打包配置

"use strict";

module.exports = function (grunt) {

     grunt.initConfig({

       pkg: grunt.file.readJSON("package.json"), // 读取packge.json的依赖配置项
       jshint: {
            files: ["*.js", "public/libs/earth/**/*.js"],
            options: {
                // ignores: [""],
                globals: {
                    Buffer: false,
                    console: false,
                    exports: false,
                    module: false,
                    process: false,
                    require: false,
                    __dirname: false
                },
                globalstrict: true,
                validthis: true //允许严格模式下非构造函数使用this
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-jshint"); // 加载grunt-contrib-jshint

    grunt.registerTask("default", ["jshint"]); // 使用 默认启动的运行的插件
    
};
}

然后运行在项目根目录打开终端，运行grunt,即可查看效果 

上面用了个代码规范检查的工具，如果代码写的不规范，则会报错。

这只是其中一个插件的写法：

那么很多插件的配置写法应该怎么写呢？

4.多个插件在配置文件Gruntfile.js中的写法：

"use strict";

module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        jshint: {
            files: ["*.js", "public/libs/earth/**/*.js"],
            options: {
                // ignores: [""],
                globals: {
                    Buffer: false,
                    console: false,
                    exports: false,
                    module: false,
                    process: false,
                    require: false,
                    __dirname: false
                },
                globalstrict: true,
                validthis: true //允许严格模式下非构造函数使用this
            }
        },
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;连接合并
            },
            build: { //此名称任意
                src: ["public/libs/earth/**/*.js"],  //合并哪些js文件
                dest: "dist/js/result.js" //输出的js文件
            }
        },
        uglify: {
            my_target: {
                files: {
                    'dist/js/result.min.js': ['dist/js/result.js']
                }
            }
        }
    });

    // Load the plugin that provides the "jshint" task.
    // 新增一个插件就得写一遍 grunt.loadNpmTasks
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask("default", ["jshint", "concat", "uglify"]);
};

每次增加一个插件就得写一次grunt.loadNpmTasks，并且在 grunt.registerTask增加一项。

这也太麻烦了！！其实还有更高级的写法，下次更新。。。

参考连接：https://segmentfault.com/a/1190000005029360?utm_source=tuicool&utm_medium=referral