Grunt的配置及使用(压缩合并js/css)

简介

Q:Grunt为何物?

A:一个专为JavaScript提供的构建工具。

Q:啥是构建工具?

A:在项目部署上线前,通常要将源文件压缩,合并,并拷贝到bch或trunk中。 在将js模块化后,又多了一个分析,提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具,称之为构建工具。

Q:grunt是如何工作的?

A:刚刚接触grunt,举个例子可能不太恰当,但应该可以让你先比较准确的认识她。 就好像一个万能工厂(grunt),只负责执行任务(Task),不关心每个任务到底都干了什么。 这些任务比如:

  • clean:删除临时文件

  • uglify:压缩

  • qunit:测试

  • concat:合并

任务流程可能是这样的:

  • task:clean

  • task:uglify

  • task:qunit

  • task:concat

安装

前提是你已经安装了nodejsnpm。 你可以在 nodejs.org 下载安装包安装,也可以通过包管理器(比如在 Mac 上用 homebrew,同时推荐在 Mac 上用 homebrew)。

安装grunt CLI

npm install -g grunt-cli

按照官方的说法,grunt-cli只是为了在同一台机器上安装不同的grunt版本,那么咱们先不去管他。

在项目中使用grunt

首先需要往项目里添加两个文件:package.jsonGruntfile.js

  • package.json:该文件用来为npm存放项目配置的元数据,与grunt关系最大的配置在devDependencies中。
  • {
        "name": "cyjs",
        "version": "0.1.0",
        "description": "js for k68.org",
        "homepage": "http://www.k68.org/",
        "author": "firebaby",
        "devDependencies": {
          "grunt": "~0.4.1",
          "grunt-contrib-jshint": "~0.3.0",
          "grunt-contrib-concat": "~0.1.1",
          "grunt-contrib-uglify": "~0.1.2",
          "grunt-contrib-cssmin": "~0.5.0",
          "grunt-htmlhint": "~0.9.2"
        }
    }


  • Gruntfile.js:注意G的大写,这个文件就是grunt的配置了,其中详细定义了每个任务的细节和执行任务的顺序等。

一、安装grunt

在命令行进入项目所在目录,键入如下命令即可,npm会根据devDependencies中的配置,将需要的grunt及其插件下载到你的项目目录中。

npm install grunt --save-dev

grunt-contrib-jshint(js语法检查)、grunt-contrib-concat(js合并)、grunt-contrib-uglify(采用UglifyJS压缩js)、grunt-contrib-cssmin(Css压缩合并)、grunt-htmlhint(html语法验查),以上都是常用的插件。

更多插件,请访问:http://gruntjs.com/plugins

在项目目录下安装插件也可采用如下方式安装:
安装:uglify

npm install grunt-contrib-uglify

安装:cssmin

npm install grunt-contrib-cssmin

插件安装完成后,查看根目录,会发现node_modules目录,包含了相应的插件目录。

二、新建Gruntfile.js

Gruntfile.js由以下内容组成
1、wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API

 module.exports = function(grunt) {
      // Do grunt-related things in here
    };

2、项目和任务配置

3、载入grunt插件和任务

4、定制执行任务

例:

module.exports = function(grunt) {
  //配置参数
  grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     concat: {
         options: {
             separator: ';',
             stripBanners: true
         },
         dist: {
             src: [
                 "js/config.js",
                 "js/smeite.js",
                 "js/index.js"
             ],
             dest: "assets/js/default.js"
         }
     },
     uglify: {
         options: {
         },
         dist: {
             files: {
                 'assets/js/default.min.js': 'assets/js/default.js'
             }
         }
     },
     cssmin: {
         options: {
             keepSpecialComments: 0
         },
         compress: {
             files: {
                 'assets/css/default.css': [
                     "css/global.css",
                     "css/pops.css",
                     "css/index.css"
                 ]
             }
         }
     }
  });
 
  //载入concat和uglify插件,分别对于合并和压缩
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
 
  //注册任务
  grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
}


grunt api文档:http://gruntjs.com/api/grunt

三、命令行执行grunt任务

进入到项目根目录,敲:

grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行,例执行js压缩命令:

grunt uglify

css压缩命令

 grunt cssmin
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值