咳咳,其实这篇文章是我从老博客搬过来滴,来复习一下,顺便来充实一下我的后宫~~老博客地址
首先,Grunt 依赖 Node.js 所以先要安装node.这里附上node的安装方法
安装 Grunt
实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。
方法如下:1
npm install -g grunt-cli
可能npm在中国比较慢,可以加上一个淘宝的镜像:–registry=https://registry.npm.taobao.org ,即输入:1
npm install -g grunt-cli --registry=https://registry.npm.taobao.org
控制台出现了这个的时候代表已经安装成功了。(需要注意,因为使用 -g 命令会安装到全局,可能会涉及到系统敏感目录,如果用 Windows 的话,可能需要你用管理员权限,如果用 OS X / Linux 的话,你可能需要加上 sudo 命令。)
编写package.json
在项目文件夹下面,打开命令行,输入指令1
npm init
之后就出来很多信息,然后开始填写项目名称,填写好了之后回车即可。或者一路回车下去。这时就会生成一个文件,叫package.json 里面的信息是自动生成的:
1 | { |
接下来你就可以在编辑器里面修改你的 package.json的代码了
Grunt 和插件
可是我们现在还是没使用到grunt和它的插件,我们日常的项目有什么东西是需要的呢?
比如:检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。
就现在的这个示例项目而言,我打算让 Grunt 帮忙实现下面几个功能:
差不多就是这些,根据这些任务需求,需要用到:
合并文件:grunt-contrib-concat
语法检查:grunt-contrib-jshint
Scss 编译:grunt-contrib-sass
压缩文件:grunt-contrib-uglify
监听文件变动:grunt-contrib-watch
建立本地服务器:grunt-contrib-connect
它们的命名和文档都很规范,因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包,比如grunt-contrib-concat - npm 你也可以在这上面看到用法等。
下面我们就要在这个项目中安装这些插件,执行命令:1
npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目,同时加上了 —save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下,是不是多了1
2
3"devDependencies": {
"grunt": "^0.4.5"
}
没错,这个的意思就是当前项目依赖 grunt,后面是它的版本,咱们不用管。如果安装的时候没有添加 —save-dev 参数,这里就不会出现了,你需要自行添加上去。
下面我们来安装 Grunt 的插件,当然,不需要一个个的安装,太麻烦了,我们可以:1
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
这时你的package.json文件就变成了这样:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 {
"name": "zyy_node",
"version": "1.0.0",
"description": "for zyy to learn grunt",
"main": "index.js",
"dependencies": {
"grunt-contrib-concat": "^0.5.1",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.11.2",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.10.0",
"grunt-contrib-watch": "^0.6.1"
},
"devDependencies": {
"grunt": "^0.4.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"grunt"
],
"author": "zyy",
"license": "MIT"
}
配 Gruntfile.js
Gruntfile.js可以写任意的 JS 代码,比如声明一个 对象 来存储一会要写任务的参数,或者是一个变量当作开关等等。1
2
3module.exports = function(grunt) {
//所有的代码要包裹在里面
};
按照官网,里面的主要是为三个部分:
- 初始任务配置
- 插件加载
- 任务注册
顾名思义,这三块代码,任务配置代码就是调用插件配置一下要执行的任务和实现的功能,插件加载代码就是把需要用到的插件加载进来,任务注册代码就是注册一个 task,里面包含刚在前面编写的任务配置代码。
这样,就可以用 grunt 来执行注册的一个 task 从而根据任务配置代码调用需要的插件来执行相应的操作。
下面来分别看一下这三块代码的写法。
任务配置代码
1 | module.exports=function(grunt){ |
编译sass
1 | /* |
然后在目录下打开控制台:,执行一下 grunt 命令,结果报错 undefined,没错,因为我们的 default task 里面没有定义任何任务,然后执行 grunt outputcss 命令,提示编译 Scss 文件成功。
(重要提醒,首先你的电脑得装有sass,安装教程
回到目录,发现这样就多了两个文件了
合并文件
合并文件使用的是 grunt-contrib-concat ,将自己的js文件合并为一个。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35module.exports = function(grunt) {
var sassStyle = 'expanded';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
output : {
options: {
style: sassStyle
},
files: {
'try.css': 'try.scss'
}
}
},
concat: {
options: {
separator: '', //两个文件直接的分隔符,可以为 ";" 也可以什么都不填
},
dist: {
src: ['Storage.js', 'bodyOnload.js'], //将我的文件和别的小伙伴的文件合并到了一起
dest: 'all.js', //变成了一个文件
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('outputcss',['sass']);
grunt.registerTask('concatjs',['concat']);
grunt.registerTask('default');
检查语法 grunt-contrib-jshint
压缩 grunt-contrib-uglify
语法检查相对严格,对于一般的js漏掉 “;”分号,就会报错,或者 if( a == 0 )这类也会被报错,我们在写代码的时候应该要规范一点,写成 if(a === 0)。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47module.exports = function(grunt) {
var sassStyle = 'expanded';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
output : {
options: {
style: sassStyle
},
files: {
'try.css': 'try.scss'
}
}
},
concat: {
options: {
separator: '',
},
dist: {
src: ['Storage.js', 'bodyOnload.js'],
dest: 'all.js',
},
},
uglify: {
compressjs: {
files: {
'all.min.js': ['all.js'] //将all.js压缩成all.min.js
}
}
},
jshint: {
all: ['all.js'] //此处语法严格,也有没那么严格的模式,可去管网查
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('outputcss',['sass']);
grunt.registerTask('concatjs',['concat']);
grunt.registerTask('compressjs',['concat','jshint','uglify']);
grunt.registerTask('default');
};
当然,你可以用grunt-contrib-watch实时监控变化 和grunt-contrib-connect 来实时刷新窗口 (前提是你按了Crtl+s)
1 | module.exports = function(grunt) { |
最后的控制台
最常用的就这几个插件,在各种大神博客的帮助下,终于入门了,以后会继续去网站上挖掘一些自己需要的东西。稀稀拉拉写了三天多,希望能够给到grunt小白一个帮助吧