最近看了下angular,顺便就看到了前端自动化构建工具grunt
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0
版本使用。
- 安装nodejs
brew install node
如果已经安装了nodejs,请确保当前环境中所安装的 npm 已经是最新版本
sudo npm update -g npm
注:npm是nodejs自带的包管理工具(类似于maven),不需要再另行安装了
- 安装grunt
sudo npm install -g grunt-cli
注:上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。
- 使用grunt
- 新建文件夹, 如 grunt
- 进入文件夹执行
npm init
然后可以在文件夹中看到一个package.json,内容如下:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
注:name不能为grunt, 否则会报错
- 安装grunt插件
npm install <module> --save-dev
此命令不光安装了<module>,还会自动将其添加到devDependencies配置段中,如下:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt-test": "file:grunt"
}
}
npm install grunt --save-dev #安装Grunt最新版本到项目目录中,并将其添加到devDependencies内
npm install grunt-contrib-jshint --save-dev #安装 JSHint 任务模块
- 新建Gruntfile.js文件,和package.json都位于项目根目录下
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);
};
以上是使用压缩插件压缩和混淆js
- 运行grunt
grunt #在根目录下执行