Grunt入门-压缩合并js或css

网络上看了不少的Grunt教程，以为都看得只知其一;不知其二，以为本身也有必要写一点东西，只看成是加深本身的理解。

1,全局安装Grunt

npm install -g grunt-cli //全局安装命令就不用我多说了

2,新建项目Grunt，安装项目依赖环境

npm install 
这个呢，必定要在安装在项目文件夹下面
若是你用的webstorm那么直接选中项目打开下面的命令行工具就能够了
不然就本身cd 命令切换过去再安装吧。

备注：有人说执行命令没有反应，为何呢，由于没有package.json啊，
把下面的json文件复制一份到项目里，注意名字不要修改

步子太大容易那啥，扯着蛋，我之因此以为大部分都看得只知其一;不知其二我以为是有缘由的，一瞬间接受太多的东西了，因此呢，我们就一步一步来，先从最基本的开始。

要说最基本的就要从需求开始，如今就定一个最基本的需求，
项目里面有几个js文件须要合并、压缩，
如今呢，就先实现一个快捷键压缩合并js的功能吧。
（谁让我是懒人呢，懒人就要用快捷键）
{*全自动实时压缩的人请无视我*}

3,要想压缩合并js文件，就要让项目知道你要压缩合并哪几个js文件，
而且知道压缩合并以后放在哪里

这里新建一个Gruntfile.js(注意名字，要如出一辙，暂时不要考虑为何),其它的看备注吧，简直不能更详细

module.exports = function (grunt) {//全部的代码必须放在这个里面
    // 项目配置
    grunt.initConfig({//初始化配置
        pkg: grunt.file.readJSON('package.json'),//读取json文件配置信息
        uglify: {//方法名，看最后一行代码就明白了
            options: {//文件的一些描述信息，可按需配置
                banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                //须要压缩合并的文件目录src,后面拼接的是上面json文件中file字段
                src: 'src/<%=pkg.file %>.js',//注意，这里能够是数组，写在json中效果更好哦
                //多个文件
                //src: ['src/backbone.js', 'src/underscore.js'],
                //也能够
                //src: ['src/<%=pkg.file %>.js', 'src/<%=pkg.file1 %>.js'],
                //压缩合并后放置的文件目录dest
                dest: 'dest/<%= pkg.file %>.min.js'
            }
        }
    });
    // 加载提供"uglify"任务的插件 //调用压缩合并功能须要的模块
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 添加默认任务//默认任务是压缩合并
    grunt.registerTask('default', ['uglify']);
}

OK， js看完了，固然里面还有不少能够了解的，这个就须要看API等等了，
而后，看看下面须要的json吧

{
  "name": "demo",
  "file": "lib",
  "version": "0.1.0",
  "description": "grunt start guide @oospace ",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

这个就不加备注了，一个json文件而已，单词不认识的本身翻译一下，

注意，这里的依赖devDependencies，就是执行npm install 会自动安装的东西

**

上面的是压缩js的，下面就放一个压缩css的例子吧，还能再学点什么,
发散一下思惟，这里若是是less文件怎么办？

module.exports = function (grunt) {
  grunt.initConfig({
  concat: {//css文件合并
    css: {
      src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的全部css文件
      dest: 'dist/all.css'  //生成到grunt项目路径下的dist文件夹下为all.css
    }
  },
  cssmin: { //css文件压缩
     css: {
        src: 'dist/all.css',//将以前的all.css
        dest: 'dist/all.min.css'  //压缩
      }
   }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
  
  grunt.registerTask('default', ['concat','cssmin']);
}

4,到了这里，已经能够实现咱们最初的目的了，在命令行切换到项目文件夹里

grunt //该命令会执行你定义的默认命令（上面的default）

grunt <name> //加上你定义的命令的名字，忽略尖括号，执行对应的命令

5,至于说好的快捷键执行命令，请参考：
webstorm和node配合使用的一些小技巧之External tools