Grunt项目搭建

首先介绍一篇比较棒的文章：
http://www.cnblogs.com/wangfupeng1988/p/4561993.html
之后，我有必要改改自己的文章啦 /(ㄒoㄒ)/~~

安装

---

安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。
Grunt.js 0.4之后，其不再使用全局方式安装整个Grunt.js，而是在全局安装Grunt.js Client，然后在当前项目中安装Grunt，来避免未来不同项目对Grunt不同版本的依赖关系。
如果安装了之前的版本，可以使用npm的命令来删除掉原来的Grunt.js。

 npm uninstall -g grunt

然后安装：Grunt.js Client：

 npm install -g grunt-cli

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。

package.json

---

{
 "name": "my-project",
 "version": "0.1.0",
 "devDependencies": {
      "grunt": "~0.4.1"  //或者“*”
       "grunt-contrib-less": "*",
       "grunt-contrib-watch": "*"
 }
}

package.json是项目的配置文件，有一些项目的依赖信息，以及作者、版本等信息。我们先写一个简单的package.json。

• name属性，表示该项的名字。
• version属性，则是该项目的版本号。
• devDependencies属性，则包含该项目的依赖，目前我们的依赖只有grunt，以及版本为0.4.1。

在终端大概包含该package.json的目录，输入命令：

 npm install

会发现，该目录此时多了一个node_modules文件夹，里面有个grunt文件夹，这个就是我们安装在项目的Grunt.js。(表示只用less和watch)

写Gruntfile.js

---

module.exports = function(grunt) {

// 给grunt添加些设置
grunt.initConfig({
  less: {
    options: {
        paths: ['less'],
        compress: false,   //是否压缩
        yuicompress: false, //是否压缩
        optimization: 2
    },
    compile: {
        expand: true,
        cwd: 'less',
        src: ['**/*.less'],   //路径
        dest: 'css/',  //编译导出路径
        ext: '.css'   //扩展名
    }
  },  
  watch: {
    less: {
        files: ['less/*.less'],
        tasks: ['less']
    }
  }
 });

// 载入 "uglify" 插件任务
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');

// 定义默认需要执行的任务
grunt.registerTask('default', ['less', 'watch']);
};

拿一份现有的 Grunt 项目练手

---

假定Grunt CLI已经正确安装，并且已经有一份配置好package.json和 Gruntfile文件的项目了，接下来就很容易拿Grunt练手了：

• 将命令行的当前目录转到项目的根目录下。
• 执行npm install命令安装项目依赖的库。
• 执行 grunt命令。

OK，就是这么简单。还可以通过grunt --help命令列出所有已安装的Grunt任务（task），但是一般更建议去查看项目的文档以获取帮助信息。

package.json

 {
   "family": "dq",
   "name": "dq-demo-static",
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
       "grunt": "*",
       "grunt-cmd-combo": "~1.0.0",
       "grunt-contrib-less": "~0.9.0",
       "grunt-contrib-uglify": "~0.2.2",
       "grunt-contrib-watch": "*"
    }
 }

Gruntfile.js

解释：

module.exports = function(grunt){
// 构建配置任务
grunt.initConfig({
    //读取package.json的内容，形成个json数据
       pkg: grunt.file.readJSON('package.json'),

    // 复制
    copy: {
        // 指定子任务，调用可以是grunt copy(执行copy里面的全部任务)，grunt copy:build(执行copy里面的build任务)
        build: {
            cwd: 'js',      //指向的目录是相对的,全称Change Working Directory更改工作目录
            src: ['**'],    //指向源文件，**是一个通配符，用来匹配Grunt任何文件
            dest: 'images', //用来输出结果任务
            expand: true    //expand参数为true来启用动态扩展，涉及到多个文件处理需要开启
        },
        // 注：如果src: [ '**', '!**/*.styl' ]，表示除去.styl文件，！在文件路径的开始处可以防止Grunt的匹配模式
    },

    // 清除
    clean: {
        build: {
            src: ['css/**/*.*']
        },
    },

    less: {
        dynamic_mappings: {
            files: [{
                expand: true,     // Enable dynamic expansion.
                cwd: 'build/less',      // Src matches are relative to this path.
                src: ['**/*.less', '!**/header.less', '!**/sidebar.less', '!**/footer.less', '!**/reset.less', '!**/layout.less', '!**/nprogress.less', '!**/post.less', '!**/single.less'], // Actual pattern(s) to match.
                dest: 'css',   // Destination path prefix.
                ext: '.css',   // Dest filepaths will have this extension.
            }],
        },
    },

    // CSS压缩
    cssmin: {
          build: {
              expand: true,
            cwd: 'css/',
            src: ['*.css', '!*.min.css'],
            dest: 'css/',
            ext: '.css'
          }
    },

    // 压缩js
    uglify: {
        // 基本压缩（用于不常修改的文件）
          build: {
           files: [{
              expand: true,
              cwd: 'build/js',
              src: ['*.js', '!**/component.js', '!**/jquery.js', '!**/html5.js'],
              dest: 'js/'
          }],
          },
          // public（常修改维护的文件）
          publicJs: {
          files: {
            'js/public.js': ['build/js/public.js']
          }
          },
          // 组件压缩（组件级别，一般仅压缩一次）
          component: {
            options: {
                  mangle: false  // false表示关闭短命名方式压缩。如果文件要共享到另一个项目中，会带来问题，因为名称已改变
            },
            files: {
                  'js/component.js': [ 'build/js/component/piano_storage.js']
            },
        },
    },

    // JS语法检查
    jshint: {
        all: ['js/*.js'],
    },

    // 监听(监测到文件改变时执行对应任务)
    watch: {
          stylesheets: {
            files: 'build/less/*.less',
            tasks: [ 'stylesheets' ]
          },
          publicJs: {
            files: 'build/js/public.js',
            tasks: [ 'uglify:publicJs' ],
          },
          scripts: {
              files: ['build/js/*.js', '!build/js/**/public.js' ],
            tasks: [ 'uglify:build' ],
          },
          componentJS: {
              files: ['build/js/component/*.js'],
            tasks: [ 'uglify:component' ],
          }
    },

// initConfig结尾
});

// 加载任务-分开加载
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-cssmin");

// 把grunt-contrib插件全部一次性加载
// grunt.loadNpmTasks('grunt-contrib');

// grunt.event.on('watch', function(action, filepath) {
//       grunt.config(['uglify', 'build'], filepath);
// });
grunt.event.on('watch', function(action, filepath) {
  grunt.config(['jshint', 'all'], filepath);
});

// 自定义任务
// 作用：将以上众多子任务和在一起，便于手工运行或定义watch的任务

// 处理CSS
grunt.registerTask(
      'stylesheets', 
      'Compiles the stylesheets.', 
      // [ 'less' ]
      [ 'less', 'cssmin' ]
);
// 处理JS
grunt.registerTask(
      'scripts', 
      'Compiles the JavaScript files.', 
      [ 'uglify:publicJs' ]
);
// 处理public
grunt.registerTask(
      'publicJs', 
      'Compiles the JavaScript files.', 
      [ 'uglify:publicJs' ]
);
// componentJS
grunt.registerTask(
      'componentJS', 
      'Compiles the JavaScript files.', 
      [ 'uglify:componentJS' ]
);

// 创建工程
grunt.registerTask(
      'build',    //任务名称
      'Compiles all of the assets and copies the files to the build directory.',   //任务描述
      [ 'clean', 'copy', 'stylesheets', 'scripts', 'jade' ]    //将要运行的任务数组，按顺序执行
);

// 默认工程
grunt.registerTask(
      'default', 
      'Watches the project for changes, automatically builds them and runs a server.', 
      [ 'build', 'connect', 'watch' ]
);
// default任务运行build创建一个初始的build，然后它开始连接服务器，最后它会运行watch，监测文件变化和重新构建。
// 因为watch一直在运行，所以服务器一直在运行。在你的控制台上运行grunt，然后到http://localhost:4000查看你的项目。

//modules结尾 
};

使用：

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    combo : {
        build: {
            files: [{
                expand: true,
                cwd: 'script-ss/',
                src: ['./page/*.js'],
                dest: './script-min/',
                ext: '.js'
            }]
        }
    },
    uglify: {  
        build: {  
            files: [{
                expand: true,
                cwd: 'script-min',
                src: ['**/*.js'],
                dest: 'script-min'
            }
            , {
                expand: true,
                cwd: 'script-ss',
                src: ['**/*.js'],
                dest: 'script-min'
            }]
        }  
    },  
    less: {
        options: {
            paths: ['less'],
            compress: true,
            yuicompress: true,
            optimization: 2
        },
        compile: {
            expand: true,
            cwd: 'less',
            src: ['**/*.less'],  
            dest: 'css/',
            ext: '.css'
        }
    },  
    watch: {
        less: {
            files: ['less/**/*.less'],
            tasks: ['less'],
            options: {
                nospawn: true
            }
        },
        combo: {
            files: ['script-ss/**/*.js'],
            tasks: ['combo'],
            options: {
                spawn: false,
            },
        }
    }

});  

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

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

grunt.registerTask('default', ['watch']);
grunt.registerTask('mkcss', ['less']);
grunt.registerTask('normal', ['combo']);
grunt.registerTask('min', ['combo', 'uglify']);
grunt.registerTask('build', ['less', 'combo', 'uglify']);
};

目录结构

目录结构

html文件引入

tt.js

define(function(require,exports){
   var t2 = require('./t2')
   alert(1)
 });