Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。
Grunt命令行(CLI)安装到全局环境
npm install -g grunt-cli
每次运行grunt
时,他就利用node提供的require()
系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt
。如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile
中的配置信息,然后执行你所指定的任务
安装Grunt最新版本到项目目录中
npm install grunt --save-dev
1 文件目录
置好package.json
和 Gruntfile
文件的项目了
grunt-contrib-clean:删除文件。
grunt-contrib-compass:使用compass编译sass文件。
grunt-contrib-concat:合并文件。
grunt-contrib-copy:复制文件。
grunt-contrib-cssmin:压缩以及合并CSS文件。
grunt-contrib-imagemin:图像压缩模块。
grunt-contrib-jshint:检查JavaScript语法。
grunt-contrib-uglify:压缩以及合并JavaScript文件。
grunt-contrib-watch:监视文件变动,做出相应动作。
grunt-font-spider:生成字体,压缩字体
package.json
{
"name": "webPage",
"version": "0.1.0",
"dependencies": {
"grunt": "^1.0.2",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-csslint": "^2.0.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.0.0"
},
"devDependencies": {
"grunt-contrib-imagemin": "^2.0.1",
"grunt-font-spider": "^0.1.5"
}
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//删除文件
clean: ['build/*'],
//复制文件
copy: {
main: {
expand: true,
cwd: 'src',
src: '**',
dest: 'build/'
},
},
//js语法检查
jshint: {
all: ['Gruntfile.js', 'src/html/js/weetgo.js']
},
//js压缩
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>*/'
},
my_target: {
files: {
'build/html/js/weetgo.js': ['build/html/js/weetgo.js'],
// 'build/html/js/hammer.js': ['build/html/js/hammer.js']
}
}
},
//css压缩
cssmin: {
options: {
mergeIntoShorthands: false,
roundingPrecision: -1
},
target: {
files: {
'build/page/css/index.css': ['build/page/css/index.css'],
'build/page/css/base.css': ['build/page/css/base.css'],
}
}
},
//监听文件
watch: {
scripts: {
files: ['src/html/js/*.js','src/html/js/*.css'],
tasks: ['jshint','cssmin','jshint'],
options: {
spawn: false,
},
},
},
//静态服务器
connect: {
server: {
options: {
port: 80
}
}
},
imagemin: {
static: {
options: {
optimizationLevel: 3,
svgoPlugins: [{removeViewBox: false}]
}
},
dynamic: {
files: [{
expand: true,
cwd: 'build/page/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'build/page/images'
}]
}
},
// 字蛛插件:压缩与转码静态页面中的 WebFont
'font-spider': {
options: {
ignore: [], //忽略加载的文件规则(支持正则) - 与 `resourceIgnore` 参数互斥
map: [], //映射的文件规则(支持正则) - 与 `resourceMap` 参数互斥 - 可以将远程字体文件映射到本地来
backup: false, //是否支持备份原字体
unique: true, //是否对查询到的文本进行去重处理
sort: true, //是否排序查找到的文本
loadCssFile: true, //是否支持加载外部 CSS 文件
},
main: {
src: 'build/page/*.html'
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-font-spider');
// 默认被执行的任务列表。
grunt.registerTask('default', ['clean','copy','imagemin','cssmin','font-spider']);//'clean','copy','jshint','uglify','cssmin','connect','watch',imagemin,'font-spider'
};
在你的项目根根目录下运行Grunt命令
$ grunt