[前端] grunt入门

对于grunt的使用，在grunt官网（http://www.gruntjs.net/）上有详尽的说明，所以在这里只想讲下，grunt是基于node环境的，要先装nodejs环境，才能使用，nodejs下载地址：www.nodejs.org

 

grunt使用：

官网上也讲了，先装grunt命令行界面才能使用命令完成任务，下面是安装命令

 

npm install -g grunt-cli

 

这里是安装在全局的

 

在项目内手动建立package.json  和 gruntfile.js 文件，至于文件内放什么，官网上有详细说明

我的grunt项目：

 

对插件的使用，要先下载插件  

 

npm install grunt-contrib-uglify --save-dev

 

也可以事先在package.json包中，填写好插件模块，在使用npm install 命令时会自动创建

 

然后就是使用插件

 

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

 

 

 

当然最终目的是使用grunt来完成一些重复的任务，这里是注册任务

 

grunt.registerTask('default', 'this is default task.', ['uglify']);

 

 

 

最后就是在命令行输入grunt default 或 grunt来实现任务  

grunt 任务名:参数1:参数2……  如： grunt test:hello:world

 

gruntfile.js示例：

 

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        build: {
            src: 'src/a.js',
            dest: 'build/a.min.js'
      }
    },
    concat: {
        options: {
            separator: ';',
            stripBanners: true,
            banner: '/*! ab.js - 2014-2-4 */'
      },
        dist: {
            src: ['src/b.js','src/a.js'],
            dest: 'dist/ab.js'
      }
    },
    jshint: {
        files: ['src/a.js'],
      options: {
            globals: {
            jQuery: true,
            console: true,
            module: true,
            document: true
        }
        }
    },
    watch: {
        files: ['src/a.js'],
        tasks: ['jshint']
    }
  });

  // load modules
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // tasks
  grunt.registerTask('default', 'this is default task.', ['uglify']);

};

 

 

 

我看过的相关博文：

http://www.cnblogs.com/snandy/p/3534862.html

http://www.hulufei.com/post/grunt-introduction

都很不错。

 

欢迎关注技术开发分享录：http://fenxianglu.cn/