grunt前端自动构建工具初级使用
浅谈grunt的使用方法
好啦，今天来和大家谈谈grunt
害怕与社会脱轨，所以自己研究了一下，简单说说我梳理完的grunt
首先要知道为什么使用grunt
1.grunt可以检测js、css文件内部是否有错误
2. grunt可以进行js、css\html…的压缩
3. grunt可以watch这些文件，就像sass一样，源文件有变换，转化后的css会跟着变。也就是说，js、或css等源文件有变化，压缩的文件会跟着变
首先，grunt和vue一样，环境用的node，也需要全局安装
npm install -g grunt-cli
想要知道自己的grunt是否安装成功，可以执行
npm grount -version
然后在使用grunt之前，我们还需要准备两个文件
第一步：cd xxx 找到你的目的文件第二部：npm init(填写项目信息)
|
name: (GruntT) // 模块名称：只能包含小写字母数字和中划线，如果为空则使用项目文件夹名称代替
version: (0.0.0) // 版本号
description: // 描述：会在npm搜索列表中显示
entry point: (index.js) // 模块入口文件
test command: // 测试脚本
git repository: // git仓库地址
keywords: // 关键字：用于npm搜索，多个关键字用空格分开
author: // 作者
license: (BSD-2-Clause) // 开原协议
|
npm install grunt –save-dev
（将安装的grunt添加到 package.json中）
npm install –save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-htmlmin grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-watch grunt-contrib-connect （ 像我一样懒得可以用这种方法，Grunt 的基本所需插件一次安装）
npm install grunt-contrib-csslint –save-dev
（压缩css，其他的雷同）
module.exports = function(grunt) {
//导入要用的模块
grunt.loadNpmTasks(\’grunt-contrib-uglify\’);
grunt.loadNpmTasks(\’grunt-contrib-cssmin\’);
grunt.loadNpmTasks(\’grunt-contrib-htmlmin\’);
grunt.loadNpmTasks(\’grunt-contrib-imagemin\’);
grunt.loadNpmTasks(\’grunt-contrib-watch\’);
grunt.loadNpmTasks(\’grunt-contrib-jshint\’);
grunt.loadNpmTasks(\’grunt-contrib-csslint\’);
grunt.loadNpmTasks(\’grunt-contrib-concat\’);
//配置具体任务
grunt.initConfig({
uglify: { //主任务
a: { //分任务
expand: true, //分开执行
src: \’js/*.js\’, //源文件地址
dest: \’build\’ //导入到那个文件中
}
},
cssmin: {
a: {
expand: true, //分开执行
src: \’css/*.css\’,
dest: \’build\’
}
},
htmlmin: {
options: {
removeComments: true, //去注释
collapseWhitespace: true //去空格
},
a: {
src: \’index.html\’,
dest: \’build/index.html\’
}
},
imagemin: {
a: {
expand: true, //分开执行
cwd: \’images\’,
src: [\’**/*.{png,jpg}\’],
dest: \’build\’
}
},
watch: { //监听
a: {
files: [\’index.html\’, \’css/*.css\’],
tasks: [\’cssmin\’, \’htmlmin\’]
}
}
});
//注册一个默认任务
// grunt.registerTask(\’default\’, [\’cssmin\’]);
// grunt.registerTask(\’default\’, [\’htmlmin\’]);
// grunt.registerTask(\’default\’, [\’watch\’]);
// grunt.registerTask(\’default\’, [\’uglify\’]);
// grunt.registerTask(\’default\’, [\’jshint\’]);
// grunt.registerTask(\’default\’, [\’concat\’]);
grunt.registerTask(\’default\’, [\’uglify\’, \’cssmin\’, \’htmlmin\’, \’watch\’]);
};
grunt 命令（执行默认的任务） ，当然你也可以只执行一类，比如：grunt jshint