Grunt简介 - gintong/go2js GitHub Wiki

##为什么使用Grunt 使用grunt可以自动化的完成常见的压缩代码、合并文件、检查语法错误、执行测试代码、将Sass或Less转换成CSS代码等任务,为个人或团队减少劳动和耗时,从而帮助我们自动化的完成相关任务管理和执行工作。

##官方文档

#学习总结 ##安装 Grunt基于Node.js,所以需要先安装Node.js

 npm install grunt-cli -g

grunt-cli表示安装的是grunt的命令行界面

##配置 grunt在使用时分grunt-cli命令界面和grunt模块两个概念,其中grunt模块属于Node.js中的模块范畴,遵循Node.js相关约定

###package.json

  • 使用npm init创建package.json文件
  • 使用npm install [插件模块名] --save-dev自动下载插件模块,并将依赖加入devDependencies

首先在你的node.js项目配置文件package.json中,需要配置grunt相关的模块,例如

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"//不低于0.2.2
  }
}

#Gruntfile.js Grunt使用Gruntfile.js作为配置文件,当使用grunt相关命令执行时,将根据此文件进行执行。如想指定特定文件,可使用grunt --gruntfile [filepath]

'use strict';
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),//读入外部文件
        jshint: {
            files: ['controllers/**/*.js', 'lib/**/*.js', 'models/**/*.js'],
            options: {//配置属性,替换默认值
                jshintrc: '.jshintrc'
            }
        },
        requirejs: {
            build: {
                options: {
                    baseUrl: 'public/js',
                    mainConfigFile: 'public/js/config.js',
                    dir: '.build/js',
                    optimize: 'uglify',
                    modules: [{name: 'app'}]
                }
            }
        },
        less: {
            build: {
                options: {
                    yuicompress: true,
                    paths: ['public/css']
                },
                files: {
                    '.build/css/app.css': 'public/css/app.less'
                }
            }
        },
        makara: {
            files: ['public/templates/**/*.dust'],
            options: {
                contentPath: ['locales/**/*.properties']
            }
        },
        dustjs: {
            build: {
                files: [
                    {
                        expand: true,
                        cwd: 'tmp/',
                        src: '**/*.dust',
                        dest: '.build/templates',
                        ext: '.js'
                    }
                ],
                options: {
                    fullname: function (filepath) {
                        var path = require('path'),
                            name = path.basename(filepath, '.dust'),
                            parts = filepath.split(path.sep),
                            fullname = parts.slice(3, -1).concat(name);

                        return fullname.join(path.sep);
                    }
                }
            }
        },
        copyto: {
            build: {
                files: [
                    { cwd: 'public', src: ['**/*'], dest: '.build/' }
                ],
                options: {
                    ignore: [
                        'public/css/**/*',
                        'public/js/**/*',
                        'public/templates/**/*'
                    ]
                }
            }
        },
        clean: {
            'tmp': 'tmp',
            'build': '.build/templates'
        },
        mochacli: {
            src: ['test/*.js'],
            options: {
                globals: ['chai'],
                timeout: 6000,
                ignoreLeaks: false,
                ui: 'bdd',
                reporter: 'spec'
            }
        },
        foo:'c',
        bar:'b<%= foo %>d'//使用模板
    });

    grunt.loadNpmTasks('grunt-contrib-less');//加载npm插件
    grunt.loadNpmTasks('grunt-contrib-requirejs');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-mocha-cli');
    grunt.loadNpmTasks('grunt-dustjs');
    grunt.loadNpmTasks('grunt-copy-to');
    grunt.loadTasks('./node_modules/makara/tasks/');

    grunt.registerTask('i18n', ['clean', 'makara', 'dustjs', 'clean:tmp']);//注册Task 使用 grunt i18n执行
    grunt.registerTask('build', ['jshint', 'less', 'requirejs', 'copyto', 'i18n']);
    grunt.registerTask('test', ['jshint', 'mochacli']);
    //注册自定义任务,通常放到外部js文件
    grunt.registerTask('custome','Log some stuff.',function(){
        grunt.log.write(‘Logging some stuff...').ok();//调用grunt的api
    })

};

##API详细

##常见插件

##自定义插件 1、使用npm install -g grunt-init安装grunt-init模块

2、使用git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin安装gruntplugin模板

3、在目标空文件夹中执行grunt-init gruntplugin命令

4、在目标文件夹中执行npm install

5、编写插件

6、执行npm publish发布插件到npm

⚠️ **GitHub.com Fallback** ⚠️