一、写在前面
这篇文章主要介绍一下Grunt 搭建自动化的Web前端开发环境。
如果转载,请保留作者信息。
邮箱地址:jpzhang.ht@gmail.com
二、Grunt介绍
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具。类似Java业界的Ant工具一样。实际上,你可以把grunt理解为一组task,对于需要反复重复的任务,例如:合并若干js(concat)、压缩js(min)、测试js(qunit)等等,grunt可以减轻你的劳动,简化你的工作。Grunt运行在Node.js平台之上, 通过npm安装。 它包含两个组件: grunt-cli和grunt。
三、环境准备
node.js 安装
Grunt运行离不开NodeJS和NPM。因此要使用Grunt首要的条件,你的系统需要安装NodeJS和NPM。
Ubuntu 14.04自带的Node.js版本太老,且我试了下安装并不成功,所以需要添加Node.js PPA安装最新版的Node.js,在终端中执行:
sudo add-apt-repository ppa:chris-lea/node.js注意:有可能会把报错”add-apt-repository: command not found “,执行:
sudo apt-get install python-software-properties
sudo apt-get install software-properties-commonsudo apt-get update
sudo apt-get install nodejs
安装完成后执行node -v命令,查看是否安装成功,$ node -v
v0.10.37如上显示,则表示安装成功。可以升级至最新稳定版本:
首先安装n模块:npm install -g n
升级node.js到最新稳定版:n stable
最后重启服务器即可升级至最新版本。CLI 安装
在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo权限或者作为管理员来执行以下命令。npm install -g grunt-cli
上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。
安装过程中,命令行会出现一个转动的小横线,表示正在联网加载,安装完成显示:/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.7)
└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
四、开始一个实例
到此需要准备的环境已经完毕,接下去我们就以一个简单的示例来介绍。
创建Node.js项目:
grunttest
├──src # 存放CSS、Js原文件
├──build #存放压缩之后的CSS、Js文件
├──Gruntfile.js
└──package.json
package.json 标准的json格式,用来配置项目版本号以及依赖项,初始化如下:
{
"name": "grunttest",#项目名称
"version": "1.0.0",#版本号
"devDependencies": {#用来配置项目依赖包。
}
}
安装 grunt
命令:npm install grunt –save-dev
“—save-dev”在当前目录安装grunt的同时,把grunt保存为这个目录的开发依赖项。配置package.json:”devDependencies”中就会存储开发依赖项。
执行完成:
npm WARN package.json grunttest@1.0.0 No description
npm WARN package.json grunttest@1.0.0 No repository field.
npm WARN package.json grunttest@1.0.0 No README data
npm WARN package.json grunttest@1.0.0 No license field.
grunt@0.4.5 node_modules/grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.9
├── getobject@0.1.0
├── eventemitter2@0.4.14
├── rimraf@2.2.8
├── colors@0.6.2
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── nopt@1.0.10 (abbrev@1.0.7)
├── minimatch@0.2.14 (sigmund@1.0.1, lru-cache@2.7.0)
├── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
├── glob@3.1.21 (inherits@1.0.2, graceful-fs@1.2.3)
├── grunt-legacy-log@0.1.2 (grunt-legacy-log-utils@0.1.1, underscore.string@2.3.3, lodash@2.4.2)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)测试是否安装成功:命令 grunt,如果输出如下,即表示安装成功。
Warning: Task “default” not found. Use –force to continue.
Aborted due to warnings.查看package.json ,发现 “devDependencies”: {} 自动添加了依赖项grunt,”^0.4.5”表示版本号:
{ "name": "grunttest", "version": "1.0.0", "devDependencies": { "grunt": "^0.4.5", } }
并且在项目根目录下生成“node_modules”文件夹,其中有一个“grunt”文件夹,“node_modules”文件夹用来存放项目所依赖的包,其中“grunt“文件夹就是grunt的源码。
通过Gruntfile.js配置grunt,
//包装函数 module.exports = function(grunt) { //任务配置,所有插件的配置信息 grunt.initConfig({ //获取package.json的信息 pkg:grunt.file.readJSON("package.json") }); //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序), //默认输入grunt的时候就是自动执行default中定义的任务,也可以自定义任务列表, //例如grunt.registerTask('dev', []);,即输入grunt dev执行的就是我们在dev中定义的任务。 grunt.registerTask('default', []); };
刚部署玩grunt时测试时输入grunt报错是因为没有定义默认的任务,配置完再执行就没有错误。
安装 grunt-contrib-cssmin
cssmin插件的功能就是压缩css代码,即**.min.css压缩版
插件地址: https://www.npmjs.com/package/grunt-contrib-cssmin
命令: npm install grunt-contrib-cssmin –save-dev
配置Gruntfile.js://包装函数 module.exports = function(grunt) { //任务配置,所有插件的配置信息 grunt.initConfig({ //获取package.json的信息 pkg:grunt.file.readJSON("package.json"), //cssmin插件的配置信息 cssmin: { options: { sourceMap: true }, files: { expand: true, cwd: 'src/', //设置需要压缩的目录 src: ['*.css'],//设置需要压缩的文件 dest: 'build/',//压缩之后文件的保存目录 ext: '.min.css'//压缩之后形成文件的后缀 } } }); //告诉grunt我们将使用插件 grunt.loadNpmTasks('grunt-contrib-cssmin'); //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序) grunt.registerTask('default', ['cssmin']); };
测试: src/目录下编辑css文件
src/test.css
运行grunt命令,即在build目录下生成压缩之后的css文件:test.min.css安装 grunt-contrib-uglify
uglify插件的功能就是压缩javascript代码,即**.min.js 压缩版。
插件地址: https://www.npmjs.com/package/grunt-contrib-uglify
命令: npm install grunt-contrib-uglify –save-dev
配置Gruntfile.js://包装函数 module.exports = function(grunt) { //任务配置,所有插件的配置信息 grunt.initConfig({ //获取package.json的信息 pkg:grunt.file.readJSON("package.json"), //uglify插件的配置信息 uglify: { options: { stripBanners: true, banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' //设置压缩之后文件第一行显示的内容 }, build: { src: "src/test.js",//需要压缩的文件 dest: "build/<%=pkg.name%>-<%=pkg.version%>.js.min.js" //压缩之后的文件名以及存放目录 } }, //cssmin插件的配置信息 cssmin: { options: { sourceMap: true }, files: { expand: true, cwd: 'src/', src: ['*.css'], dest: 'build/', ext: '.min.css' } }, }); //告诉grunt我们将使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序) grunt.registerTask('default', ['uglify', 'cssmin']); };
测试: src/目录下编辑js文件
src/test.js
运行grunt命令,即在build目录下生成压缩之后的js文件:grunttest-1.0.0.js.min.js安装 grunt-contrib-watch
watch将监控哪些文件的变化,以及这些文件一旦变化,要立即执行哪些插件功能。
插件地址: https://www.npmjs.com/package/grunt-contrib-watch
命令: npm install grunt-contrib-watch –save-dev
配置Gruntfile.js://包装函数 module.exports = function(grunt) { //任务配置,所有插件的配置信息 grunt.initConfig({ //获取package.json的信息 pkg:grunt.file.readJSON("package.json"), //uglify插件的配置信息 uglify: { options: { stripBanners: true, banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: "src/test.js", dest: "build/<%=pkg.name%>-<%=pkg.version%>.js.min.js" } }, //cssmin插件的配置信息 cssmin: { options: { sourceMap: true }, files: { expand: true, cwd: 'src/', src: ['*.css'], dest: 'build/', ext: '.min.css' } }, //watch插件的配置信息 watch: { scripts: { files: ['src/*.js', 'src/*.css'], // 监控的文件目录 tasks: ['uglify', 'cssmin'], // 监控到文件发生变化之后执行的任务列表 options: { spawn: false, }, }, } }); //告诉grunt我们将使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序) grunt.registerTask('default', ['uglify', 'cssmin', 'watch']); };
测试: watch将监控src文件夹下所有js文件和css文件的变化,一旦变化,则立即执行cssmin和uglify两个插件功能。
运行grunt命令,控制台提示watch已经开始监听。此时要想停止,按ctrl + c即可。Running “watch” task
Waiting…修改src/test.js,
结果显示,watch检查到了test.js文件的变化,而且通过uglify执行压缩代码,并继续监听直至结束。更多插件
进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ,我们能看到grunt到目前位置的所有插件。现在里面有4560个插件,插件分为两类。第一类是grunt团队贡献的插件,这些插件的名字前面都带有“contrib-”前缀,而且在插件列表中有星号标注。第二类是第三方提供的插件,不带有这两个特征。
你所需要的大多数task都已经作为Grunt插件被开发了出来,并且每天都有更多的插件诞生。Contrib-jshint——javascript语法错误检查;
Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
Contrib-clean——清空文件、文件夹;
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
Contrib-less——编译less文件
karma——前端自动化测试工具
……
五、 结束
到此,使用grunt搭建自动化Web开发环境已经介绍完成,在实际开发过程中,不需要把依赖包源码提交到代码仓库,只要提交package.json文件,package.json的“devDependencies”记录了这个系统的开发依赖项以及具体版本号,通过nodejs的npm(“npm install“)即可批量安装。