首先介绍一篇比较棒的文章：
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文件引入
<script src="script-min/page/tt.js" data-main="page/tt"></script>
tt.js
define(function(require,exports){
var t2 = require('./t2')
alert(1)
});
网友评论