Grunt.js 初使用

  1. 云栖社区>
  2. 博客>
  3. 正文

Grunt.js 初使用

ap0581w9c 2013-04-09 12:04:00 浏览340
展开阅读全文

由于项目中的需求要用到 grunt.js ,了解使用之后感觉各种高端、牛逼、方便、好使呀,里面有各种插件,基本上能满足一般的项目需求了,而我们的项目中暂时只用到 grunt-contrib-less、grunt-contrib-watch 而已,还有 grunt-contrib-htmlmin、grunt-contrib-jshint 等等,更多插件请到 这里 瞄瞄吧。

要使用 grunt.js ,则必须要配置 node.js 环境,现在配置 node 环境简单多了,直接去 node 官网下载个安装就行了,而且还自带了 npm 包管理器,也不要自己去手动安装了。

1、安装完之后,打开命令行,输入 npm install -g grunt-cli 安装 grunt;
2、新建文件夹(如 grunt-demo),在此文件夹新建 package.json 文件,文件代码如下:

1
2
3
4
5
6
7
8
9
{
    "name": "my-grunt-demo",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "*",
        "grunt-contrib-less": "*",
        "grunt-contrib-watch": "*"
    }
}

3、在命令切换到该文件夹目录下,输入 npm install 安装 package.json 里面依赖的包;
4、再新建 Gruntfile.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
module.exports = function (grunt) {
 
    grunt.initConfig({
        less: {
            // 编译
            compile: {
                files: {
                    'assets/css/main.css': 'assets/css/main.less'
                }
            },
            // 压缩
            yuicompress: {
                files: {
                    'assets/css/main-min.css': 'assets/css/main.css'
                },
                options: {
                    yuicompress: true
                }
            }
        },
        watch: {
            scripts: {
                files: ['assets/css/*.less'],
                tasks: ['less']
            }
        }
    });
 
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
 
    grunt.registerTask('default', ['less', 'watch']);
 
};

5、然后就可以在 assets/css/ 目录下新建 less 文件,使用 less 语法来编写项目样式;
6、写完之后在命令行输入 grunt 运行即可生成编译后和压缩后的 css 文件了。

但是每次在 less 文件里写完之后都要执行一次命令是不是很麻烦呢?有没有可以自动化执行的?当然有!程序猿怎么能把时间浪费在这每次手动编译的时间里呢?细心的你留意到 grunt-contrib-watch 了吧?没错,这货就是用来干这事的。在命令行里输入 grunt watch 即可,然后你再编译下你的 less 文件,按保存的时候再看看命令行终端,是不是自动为你编译了?如此简单神奇。

这里记录了下简单的流程,至于具体的用法可以查看下 grunt.js 的官网和它的 github 。

网友评论

登录后评论
0/500
评论
ap0581w9c
+ 关注