基于grunt构建的前端集成开发环境
2014-10-16 10:08 彭大先生 阅读(256) 评论(0) 编辑 收藏 举报目标是实现自动检查JS错误以及合并压缩JS和CSS。
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。
下面简单的介绍下Grunt的安装(MAC下):
1. 安装Node.js
node.js下载地址:
2.安装完Node后,打开终端,输入
sudo npm install -g grunt-cli
要root权限才可以,我第一次安装的时候,网上说npm install -g grunt-cli 结果出现了一大堆坑爹的英文错误提示,其中有句:Please try running this commnd again as root/Administrator .
如果之前装过低版本的Grunt,可以先卸载
npm uninstall -g grunt
package.json 是用来保存你需要的插件的列表(插件名称以及作用可以到
{ "name": "my-php", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-uglify": "~0.2.2" } }
这个文件里面是JS代码,是保存任务用的,这个文件可以到使用的时候才建立也行(前面说过Grunt 是一个基于任务的JavaScript工程命令行构建工具)
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { compress: { files: { 'js/output.min.js': ['js/test1.js','js/test2.js'] } } } }); // Load the plugin grunt.loadNpmTasks('grunt-contrib-uglify') // Default task(s) grunt.registerTask('default', ['uglify']); }
4.cd到项目目录下
执行:npm install
程序会根据你配置的package.json自动下载文件
5.好了开始测试
在程序目录新建文件夹JS,里面再弄2个文件:test1.js test2.js (这里的文件夹名以及文件名和Gruntfile.js里的对应)
终端里输入
grunt uglify:compress
好吧,如果你没配置错误的话你将看到
Running "uglify:compress" (uglify) task
File "js/output.min.js" created.
Done, without errors.
这个时候你的文件夹JS里面也会多出一个output.min.js,打开之后你会发现这是test1.js和test2.js合并压缩后的文件。
JS的合并压缩就这样搞定了! 其他项目的时候 只要把配置文件改一下就可以了。
至于其他功能(JS检查,CSS合并压缩检测等)可以下载对应的插件,然后编好任务,都能一起实现的。
grunt官方网站:
在GITHUB上放了一个参考https://github.com/w3c100/grunt