用grunt进行前端开发自动化

改用用Yeoman迸行前端开发

资料

grunt的中文社区

安装

nodejs

Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的

因此要先安装nodejs

grunt-cli

全局安装 cli

sudo yum install npm -y
sudo npm install -g grunt-cli

grunt-cli 只是一个执行工具,会查找安装好的 grunt

grunt-init

就是一个用来生成 grunt 配置文件的工具

sudo npm install -g grunt-init

有三种模板是官方维护的,下载安装默认模板,里面配置好了一些必然要用到的插件等等

git clone git://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/

使用这个命令,回答一些问题以后,就创建出了这个文件.(一开始别用,还是自己来写grunt,不然搞不懂的)

grunt-init gruntfile

开始一个新的grunt项目

先了解一下和项目关系比较大的两个核心文件. * package.json:这个文件被用来存储已经作为npm模块发布的项目元数据(也就是依赖模块) 你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件) * Gruntfile:通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee,它是用于配置或者定义Grunt任务和加载Grunt插件的。 先建立一个项目的目录,安装grunt

mkdir save_site
cd save_site
npm install grunt --save-dev

这时会把 grunt 安装到你的当前目录

--save-dev可以将你所安装的包自动保存到package.json文件中的devDependencies属性中去,如果你的项目使用时(不仅仅是开发)也需要用到某个包, 你应该使用–save将其保存在dependcies属性中。

下面来初始化一个 package.json 文件

npm init

按照提示填写

{
  "name": "save_site",
  "version": "0.0.0",
  "description": "推荐网站的网站",
  "main": "index.js",
  "dependencies": {
    "grunt": "~0.4.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bigzhu",
  "license": "BSD-2-Clause"
}

仔细看dependencies,npm自动帮你把刚才安装的grunt填入进去了.

接下来安装必然用到的其他的包

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-qunit --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-coffee --save-dev
npm install grunt-contrib-less --save-dev

因为有--save-dev这些后来加入的包,就自动放到 package.json 里面了

{
  "name": "save_site",
  "version": "0.0.0",
  "description": "推荐网站的网站",
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt": "~0.4.2"
  },
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bigzhu",
  "license": "BSD-2-Clause"
}

Gruntfile配置文件分析

wrapper函数

整个Gruntfile都要用这样的方式包起来

module.exports = function(grunt) {
    // 在这里处理Grunt相关的事情
}

项目配置

用grunt.initConfig来进行项目的配置.

module.exports = function(grunt) {
    // 在这里处理Grunt相关的事情
    
    //任务配置
    grunt.initConfig({
           pkg: grunt.file.readJSON('package.json')
       });   
}

使用grunt.file.readJSON读出package.json中的包,赋值给pkg,让grunt读取到package.json中的一些项目配置信息,这样可以避免重复配置.

后面可以用类似<%= pkg.name %>这样的来使用配置信息,这只是一个较为通用的做法(不做这一步也是可以的)

实际上grunt.initConfig真正要做的是任务的配置,接收一个字典,字典的key是顶层的任务名,里面是任务的参数.

每个任务实际上是针对grunt开发的一些任务插件,具体怎么配置,要任务插件来告诉你了,类似.vimrc吧..

比如合并压缩的插件uglify

像他网站上说的,最基本的设置就是这样的

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

这样插件型的任务,需要增加加载

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt执行时候,是要指定需要执行的任务的,或者你将任务加入到默认任务中,那么就会默认执行.

grunt.registerTask('default', ![pic]('uglify'));

可以指定多个默认任务

这是一个完整的压缩js的 grunt 任务的配置.

module.exports = function(grunt) {
    grunt.initConfig({
      uglify: {
        my_target: {
          files: {
            'dest/test.min.js': ['src/chart.js', 'src/process.js']
          }
        }
      }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('default', ![pic]('uglify'));
};

执行 grunt 就能把两个js文件合并并且压缩 == grunt 插件介绍 == * grunt-contrib-concat * grunt-contrib-uglify * grunt-contrib-qunit * grunt-contrib-coffee * grunt-contrib-less

项目实战