grunt – 前端构建工具
参考地址: grunt官网
之前自己学习了gulp, 看着grunt的一大堆代码 , 总是觉得不清晰,但是,东西好不好 ,只有用过才知道! 所以,今天简单的学习了他的使用方法。
首先我们需要知道,前端构建工具是干什么的?(why)
我的理解是,将之前需要人力一步一步进行的工具交给程序去处理。
比如,项目中我们经常会做一些优化,js合并,压缩,css压缩,合并等等,我们可能之前的是手动的通过一些工具(jshint,uglify)进行每一个的操作。
这样的带来的问题:
- 操作繁琐 ,重复
- 浪费大量的时间
然后,人们就把这些“脏活 ,累活”通过一段程序来进行处理和维护。
具体怎么做(how)
- 安装grunt-cli
grunt-cli并不是grunt。
grunt-cli的作用:
调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。 新建两份文件 package.json 和 Gruntfile.js
package.json 整过node的应该知道,是nodejs包的依赖管理文件,用来维护项目中使用到的node标准包。直接在命令行:
npm init
(一步一步设置之后)就能自动生成一个标准的package.json文件
Gruntfile.js文件就是我们最关心的配置文件了
通过它,我们制定我们需要进行的任务。
它是标准的node模块:
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']);
};
注意点
1. uglify压缩文件的时候 会把js文件中没有引用到的变量和函数 全部干掉