grunt 搭建自动化打包框架

创建属于自己的lib库。

之前跟同事聊天谈到知识的积累，想到了可以建立一个js文件吧自己平时用的方法都写到这个js中，当日后积累的多了直接就可以跟jquery的包一样引入到自己新项目中直接使用了，朋友拍手叫好。最近在搞一个基于bootstrap的响应式框架，有幸得高人指点终于欣赏了grunt的强大。整理出来供诸君与某共同学习。

grunt安装：

node.js 和 grunt的安装网上教程很多，大家可以去百度，这里不是重点，直接跳过了。

好了，grunt安装好了之后，要运行grunt命令必须依赖于下面三个东西

• Gruntfile.js             //命名行配置文件。
• package.json          //依赖关系配置文件
• node_modules         //相当于是一个lib库  ---》可以由配置文件生成    

跟很多文章一样，Gruntfile和package直接给出：

package.json：

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "latest",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-contrib-connect": "latest",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-imagemin": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-usemin": "latest",
    "connect-livereload": "latest"
  },
  "dependencies": {
    "express": "3.x"
  }
}

　　Gruntfile内容

module.exports = function (grunt) {
    // 项目配置
    grunt.initConfig({

        uglify: {
            build: {
                src: '../js/*.js',
                dest: '../dist/thinkJoy.min.js'
            }
        },
        cssmin: {
            prod: {
                options: {
                    report: 'gzip'
                },
                files: [
                    {
                        expand: false,
                        src: '../css/*.scss',
                        dest: '../dist/thinkJoy.min.css'
                    }
                ]
            }
        },
        concat: {
            options: {
                separator: '

',
                stripBanners: true
            },
            js: {
                src: [
                    "../js/*.js"
                ],
                dest: "../dist/thinkJoy.js"
            },
            css:{
                src: [
                    "../css/*.scss"
                ],
                dest: "../dist/thinkJoy.css"
            }
        },
        clean: {
            all: '../dist/*.*'
        },
        jshint : {
            all : '../js/common.js'
        }
    });
    
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-concat');
    
    grunt.registerTask('default', ['jshint']);
    grunt.registerTask('join', ['uglify','cssmin','concat']);
};

　　刚才说过了Gruntfile主要是命令配置，这里主要用到了一下几个命令

1. uglify     压缩打包js文件xxx.min.js(类似bootstrap.min.js)
2. cssmin   压缩打包css文件生成xxx.min.css(类似bootstrap.min.css)
3. concat   这里只是做一个合并的动作，不做压缩(类似bootstrap.js和bootstrap.css)
4. clean     用于删除文件的，这里是可以删除grunt生成的文件
5. jshint     用于静态检查的，可以促使用户规范代码 

grunt.registerTask('default', ['jshint']);
grunt.registerTask('join', ['uglify','cssmin','concat']);

这两行代码是用来注册命令的，第一条，相当于是一个默认的动作 在当前目录下执行grunt 就会执行jshint检查如果执行grunt join则会执行后面三个动作。当执行了grunt join命令后会在跟Gruntfile文件的同级目录下生成一个dist文件夹。

图片有点丑陋，但是相信大家用过bootstrap的一看就明白了是怎么回事了。这样随着你自己不断的积累自己的lib库会越来越充实，等哪天你一不小心默然回首的时候不觉自己已经整出来了一个初具规模的lib库了。

git地址：https://github.com/xianZJ/webFrontEndResolution.git