grunt前端自动构建工具初级使用

好啦，今天来和大家谈谈grunt

害怕与社会脱轨，所以自己研究了一下，简单说说我梳理完的grunt

首先要知道为什么使用grunt

1.grunt可以检测js、css文件内部是否有错误

2. grunt可以进行js、csshtml...的压缩

3. grunt可以watch这些文件，就像sass一样，源文件有变换，转化后的css会跟着变。也就是说，js、或css等源文件有变化，压缩的文件会跟着变

首先，grunt和vue一样，环境用的node，也需要全局安装

npm install -g grunt-cli 

想要知道自己的grunt是否安装成功，可以执行

npm grount -version

然后在使用grunt之前，我们还需要准备两个文件

Grountfile.js ->编写任务 

 

package.json ->工程文件（npm-init）

 

我们先生成package.json

第一步：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) 　// 开原协议

 

当然，如果你像我一样是个菜鸟呢，可以跟我一样直接复制（记得修改name与你的文件保持一致哦，不要忘记将此文件名修改为 package.json）

{

  "name": "支付宝充值",

  "version": "0.1.0",

  "devDependencies": {

    "grunt": "^1.0.1",

    "grunt-contrib-concat": "^1.0.1",

    "grunt-contrib-connect": "^1.0.2",

    "grunt-contrib-cssmin": "^2.2.1",

    "grunt-contrib-htmlmin": "^2.4.0",

    "grunt-contrib-imagemin": "^2.0.1",

    "grunt-contrib-jshint": "^1.1.0",

    "grunt-contrib-nodeunit": "~0.4.1",

    "grunt-contrib-sass": "^1.0.0",

    "grunt-contrib-uglify": "^3.3.0",

    "grunt-contrib-watch": "^1.0.0"

  }

}

 

package.json是为了确认文件的信息，而Gruntfile.js则使用来告诉程序我要执行的命令，简单点来说，就是告诉grunt，我要压缩谁、监控谁

 

想要执行这些压缩或监控的命令，grunt需要安装一些插件才能来执行（jshint（检查语法错误）、concat（合并文件）、uglify（压缩代码）和watch（自动执行））

 

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，其他的雷同）

 

插件安装完成，并不代表结束哦

 

你还需要配置Gruntfile.js

 

在根目录下，新建一个名为Gruntfile的js文件

然后可以直接复制我的js内容哈

 

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']);   
};

可以一次执行一个命令，也可以一次执行多个命令，看心情是吧，你随意

 

配置完成后，就快要走到最后一步了（你马上就要跟可爱的我说再见了）

 

拿起命令行，cd 到当前文档目录，执行一下

grunt 命令（执行默认的任务） ，当然你也可以只执行一类，比如：grunt jshint

 

然后你就会发现多出来一个文件，里面的就是压缩完成的成品啦

 

同时，恭喜你，薪资又涨了一些