Grunt

简介

Grunt是一个基于NodeJS，可用于自动化构建、测试、生成文档的项目管理工具。

Grunt 能做什么

Grunt可以自动化我们的整个开发流程，简单地说，就是用JavaScript去执行一些程序来完成一些任务。比如说将css、Javascript、图像等资源压缩；将Sass和Less通过预处理器编译成Css；将Coffeescript、Typescript等转化为Javascript；实时监听文件的变化，并执行自动编译任务；

在Grunt工具箱中，按任务目标我们可以分为：

编译文档型：比如编译LESS、Sass、Stylus、Coffeescript等；
文件操作型：比如说合并、压缩JavaScript、CSS、图片等；
质量保障型：比如JSHint、Jasmin、Mocha等；
类库构建型：比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的，但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

开始使用

Grunt的使用非常简单，仅需下载相应的命令行工具，针对不同的任务下载不同的插件，即可完成整个自动化过程。

将grunt-cli（grunt命令行工具）作为全局模块安装

$ npm install -g grunt-cli
通过npm初始化，为我们生成一份package.json文件

$ mkdir grunt-app && cd grunt-app

$ npm init
为项目安装grunt作为依赖

$ npm install –save-dev grunt

至此grunt已经安装完毕，但它还没有特殊的功能，要使用grunt的各种功能，需要建一份Gruntfile.js文件，并为之安装相应的插件。

新建Gruntfile.js，并写入以下内容

  module.exports = function(grunt) {

    // 之后所有的配置都是配在传递给grunt.initConfig这个方法的对象中
    grunt.initConfig({
      // 将package.json文件作为一个json对象读入
      pkg: grunt.file.readJSON('package.json'),
    });

    // 加载grunt的插件，这里的 grunt-contrib-uglify 是一个例子
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 注册一个grunt任务，第一个参数为任务的名字，当任务的名字default时，通过grunt运行项目时，会默认执行该任务；第二个参数是一个数组，是后续所要执行任务名字的集合。
    grunt.registerTask('default', ['uglify']);
  };

安装grunt插件

在安装grunt插件时，需要考虑自己需要哪些功能，下面罗列出开发中需要的大部分功能。并举个简单的例子，详细用法可参考 Gruntjs。

grunt-contrib-uglify （混淆并压缩js文件）

安装

$ npm install grunt-contrib-uglify –save-dev
配置task

grunt.initConfig({
    uglify: {
        my_target: {
          files: {
            'dest/output.min.js': ['src/input1.js', 'src/input2.js']
          }
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt-contrib-cssmin （压缩css）

安装

$ npm install grunt-contrib-cssmin –save-dev
配置task

    grunt.initConfig({
        target: {
            files: {
              'output.css': ['foo.css', 'bar.css']
            }
        }
    })

    grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt-contrib-clean （清除文件和目录，一般用来清除上一次编译生成的文件）

安装

$ npm install grunt-contrib-clean –save-dev
配置task

grunt.initConfig({
    clean: {
        build: {
            src: ['path/to/dir/one', 'path/to/dir/two']
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-clean');

grunt-contrib-watch （监听文件的变化，并自动执行任务）

安装

$ npm install grunt-contrib-watch –save-dev
配置task

grunt.initConfig({
    watch: {
        scripts: {
            files: ['**/*.coffee'],
            // 监听到文件变化后执行的task
            tasks: ['coffee'],
            options: {
                spawn: false,
            },
        },
        css: {
            files: '**/*.sass',
            tasks: ['sass'],
            options: {
                livereload: true,
            },
        },
    },
});

grunt.loadNpmTasks('grunt-contrib-watch');

grunt-contrib-connect （开启一个服务器，使我们可以通过 ip:端口号 的方式访问目录下的资源）

安装

$ npm install grunt-contrib-connect –save-dev
配置task

grunt.initConfig({
    connect: {
        server: {
            options: {
                port: 9001,
                base: 'www-root'
            }
        }
      }
});

grunt.loadNpmTasks('grunt-contrib-connect');

grunt-contrib-less （将less编译为css）

安装

$ npm install grunt-contrib-less –save-dev
配置task

grunt.initConfig({
    development: {
        files: {
            'path/to/result.css': 'path/to/source.less'
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-less');

grunt-contrib-coffee （将coffeescript编译成javascript）

安装

$ npm install grunt-contrib-coffee –save-dev
配置task

grunt.initConfig({
    development: {
        files: {
            'path/to/result.js': 'path/to/source.coffee'
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-coffee');

Grunt是一个基于NodeJS，可用于自动化构建、测试、生成文档的项目管理工具

简介

Grunt 能做什么

开始使用

安装grunt插件

CATALOG

FEATURED TAGS

FRIENDS