初步安装
1.首先安装nodejs并安装npm,如果是window下,安装了nodejs安装包,npm就有了
下载地址:http://www.nodejs.org/download/
验证方式:cmd下执行node -v与npm -v
本人下载应用版本为node:v0.12.2和npm -v:2.7.4
2.安装grunt至对应的项目目录
a.先在项目根目录下创建package.json作为配置说明
{
"name": "项目名,如:template",
"version": "版本号,如:1.0.0",
"devDependencies": {
}
}
b.执行安装指令npm install grunt --save-dev
--save-dev:后缀,会将当下依赖版本记录下package.json中,方便后期使用npm install,自动安装所有依赖版本的库内容
也可逐个安装对应的Grunt插件,插件地址如下:插件查询网站
常用插件
- Contrib-jshint——javascript语法错误检查;
- Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
- Contrib-clean——清空文件、文件夹;
- Contrib-uglify——压缩javascript代码
- Contrib-copy——复制文件、文件夹
- Contrib-concat——合并多个文件的代码到一个文件中
- karma——前端自动化测试工具
3.创建Gruntfile.js在项目对应的根目录下
格式示例:
<pre name="code" class="javascript">module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
常用内容
动态创建文件
如果你想处理大量的单个文件,可以用一些附加属性来帮助动态创建文件。这些属性在“简洁格式“和”文件数组格式“下都可用。
- expand:设为 true 来启用下面这些属性。
- cwd:所有的 src 都相对于此路径(但是不包含)。
- src:需要匹配的模式,相对于cwd。
- dest:目标文件。
- ext:在dest中的所有文件后缀都替换掉。
- flatten:在dest中的所有路径的片段都替换掉。
- rename:每当匹配到一个src时,都会调用此方法(在ext和flatten执行之后)。dest和src属性会被当参数传入,这个函数必须返回一个新的dest值。如果相同的dest被返回超过一次,每一个用它的src都会被添加到一个源数组。
再下面这个例子中,名为 minify 的任务static_mapping和 dynamic_mapping 执行的完全相同的任务
- grunt.initConfig({
- minify: {
- static_mappings: {
- // Because these src-dest file mappings are manually specified, every
- // time a new file is added or removed, the Gruntfile has to be updated.
- files: [
- {src: 'lib/a.js', dest: 'build/a.min.js'},
- {src: 'lib/b.js', dest: 'build/b.min.js'},
- {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
- {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
- ],
- },
- dynamic_mappings: {
- // Grunt will search for "**/*.js" under "lib/" when the "minify" task
- // runs and build the appropriate src-dest file mappings then, so you
- // don't need to update the Gruntfile when files are added or removed.
- files: [
- {
- expand: true, // Enable dynamic expansion.
- cwd: 'lib/', // Src matches are relative to this path.
- src: ['**/*.js'], // Actual pattern(s) to match.
- dest: 'build/', // Destination path prefix.
- ext: '.min.js', // Dest filepaths will have this extension.
- },
- ],
- },
- },
- });
常用组件的配置说明
合并组件
- concat: {
- options: {
- // define a string to put between each file in the concatenated output
- separator: ';'
- },
- dist: {
- // the files to concatenate
- src: ['src/**/*.js'],
- // the location of the resulting JS file
- dest: 'dist/<%= pkg.name %>.js'
- }
- }
压缩组件
- uglify: {
- options: {
- // the banner is inserted at the top of the output
- banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
- },
- dist: {
- files: {
- 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
- }
- }
- }
- qunit: {
- files: ['test/**/*.html']
- },
- jshint: {
- // define the files to lint
- files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
- // configure JSHint (documented at http://www.jshint.com/docs/)
- options: {
- // more options here if you want to override JSHint defaults
- globals: {
- jQuery: true,
- console: true,
- module: true
- }
- }
- }
- watch: {
- files: ['<%= jshint.files %>'],
- tasks: ['jshint', 'qunit']
- }
自定义任务
- grunt.registerTask('foo', 'My "foo" task.', function() {
- // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
- grunt.task.run('bar', 'baz');
- // Or:
- grunt.task.run(['bar', 'baz']);
- });