Grunt 初体验

首页 > 代码库 > Grunt 初体验

2024-07-28 05:00:26 226人阅读

对于没有接触过类似自动化工具的朋友，对 grunt 也许只是停留在听过阶段，而并没有真正的使用过。今天就从最初级的教程说起。
在开始教程之前，需要先确保你已经安装了 node。

下面就开始来讲解 grunt 的使用过程。

1、安装全局的 grund-cli

$ npm install -g grunt-cli

安装 grunt-cli 并不等于安装了 Grunt 任务运行器！Grunt CLI 的任务是运行 Gruntfile 指定的 Grunt 版本。这样就可以在一台电脑上同时安装多个版本的 Grunt。

2、创建项目目录

$ mkdir grunt-project

3、接着进入项目目录，创建 package.js

$ cd grunt-project$ touch package.js

package.js 是 node 创建插件和模块的依赖文件。、

下面是我的一个测试的 package.js 文件：

{  "name": "gruntFirst",  "version": "0.1.0",  "description": "test grunt",  "author": "yiyang",  "license": "ISC",  "devDependencies": {    "grunt": "~0.4.1",    "grunt-contrib-uglify":"*"  }}

4、创建 Gruntfile.js 文件
Gruntfile.js文件示例：

// 包装函数module.exports = function(grunt) {  // 任务配置  grunt.initConfig({    pkg: grunt.file.readJSON(‘package.json‘),    uglify: {      build: {        src: ‘src/<%= pkg.name %>.js‘,        dest: ‘build/<%= pkg.name %>.min.js‘      }    }  });  // 任务加载  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  // 自定义任务  grunt.registerTask(‘default‘, [‘uglify‘]);};

我用于测试的 Gruntfile.js 文件代码如下：

module.exports = function(grunt) {    // 构建任务配置    grunt.initConfig({        //读取package.json的内容，形成个json数据        pkg: grunt.file.readJSON(‘package.json‘),        uglify: {            //文件头部输出信息            options: {                banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘            },            //具体任务配置            build: {                //源文件                src: ‘src/aa.js‘,                //目标文件                dest: ‘build/aa-min.js‘            }        }    });    // 加载指定插件任务    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);    // 默认执行的任务    grunt.registerTask(‘default‘, [‘uglify‘]);};