Grunt使用步骤:
- 将当前目录转到项目的根目录下。
- npm init 生成package.json 配置项可直接enter略过。
- 执行npm install命令自动安装项目依赖的插件包node_modules。
- 将grunt命令行(CLI)安装到全局环境中npm install -g grunt-cli
- 执行 grunt 命令。
如果已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上–save-dev参数,该模块就会自动被加入package.json文件。
eg:npm install grunt-contrib-jshint –save-dev
–save是将依赖关系写入到dependencies 数组。
–save-dev 是将依赖关系写入到devDependencies数组。
包的依赖有两种,一种是dependencies一种是devDependencies,其中前者依赖的项该是正常运行该包时所需要的依赖项,而后者则是开发的时候需要的依赖项,像一些进行单元测试源文件编译等等之类的包。
主干:package.json Gruntfile.js
package.json用来存储npm模块的依赖项
Gruntfile.js配置项,告诉grunt要做什么,一般包含两件事情:
1. 读取package信息
2. 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面)
Gruntfile可压缩(uglify),合并(concat),测试(qunit),等
grunt.initConfig设置几个任务就下载对应任务grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-concat’);
注册任务
grunt.registerTask(‘default’, [‘uglify’, ‘concat’,]);
//先合并再压缩
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {//属性
options: {//目标
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {//目标
src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
dest: 'dest/libs.js'
}
},
uglify: {//属性
build: {//目标
src: 'dest/libs.js',
dest: 'dest/libs.min.js'
}
}
});
//以上代码等同于下面代码uglify自身可完成
uglify: {//属性
"my_target": {//目标
"files": {
'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
}
}
}
文件格式:
- 简洁格式(Compact):
build: {//目标
src: ‘dest/libs.js’,
dest: ‘dest/libs.min.js’
}
- 文件对象格式:
bar: {
files: {
‘dest/b.js’: [‘src/bb.js’, ‘src/bbb.js’],
‘dest/b1.js’: [‘src/bb1.js’, ‘src/bbb1.js’],
},
}
- 文件数组格式(Files Array):
bar: {
files: [
{src: [‘src/bb.js’, ‘src/bbb.js’], dest: ‘dest/b/’, nonull: true},
{src: [‘src/bb1.js’, ‘src/bbb1.js’], dest: ‘dest/b1/’, filter: ‘isFile’},
],
}
使用grunt的时候,主要工作就是配置任务或者创建任务,实际上就是做一个事件注册,然后由我们触发之,所以grunt的核心还是事件注册。每次运行grunt时,我们可以指定运行一个或者多个任务,通过任务决定要做什么,比如我们同时要压缩和合并还要做代码检查
grunt.registerTask('default', ['jshint','qunit','concat','uglify']);
当运行一个基本任务时,grunt并不会查找配置和检查运行环境,他仅仅运行指定的任务函数,可以传递冒号分割参数,比如:
grunt.registerTask('foo', 'A sample task that logs stuff.', function (arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln(this.name + ", no args");
} else {
grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
}
});
运行结果如下:
$ grunt foo:testing:123
Running "foo:testing:123" (foo) task
foo, testing 123
$ grunt foo:testing
Running "foo:testing" (foo) task
foo, testing undefined
$ grunt foo
Running "foo" task
foo, no args
执行grunt concat:js仅仅会执行concat属性下的js目标;
运行grunt compass:development就可以完成CSS文件的编译。
常用模块设置:
grunt的模块已经超过了2000个,且还在快速增加。下面是一些常用的模块。
grunt-contrib-clean:删除文件。
grunt-contrib-compass:使用compass编译sass文件。
grunt-contrib-concat:合并文件。
grunt-contrib-copy:复制文件。
grunt-contrib-cssmin:压缩以及合并CSS文件。
grunt-contrib-imagemin:图像压缩模块。
grunt-contrib-jshint:检查javascript语法。
grunt-contrib-uglify:压缩以及合并JavaScript文件。
grunt-contrib-watch:监视文件变动,做出相应动作。
//jshint
jshint: {//属性
//JSHint只需要一个文件数组(也就是你需要检测的具体文件数组),
//然后是一个options对象(这个对象用于重写JSHint提供的默认检测规则)。
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
//大括号包裹
curly: true,
//对于简单类型,使用===和!==,而不是==和!=
eqeqeq: true,
//对于首字母大写的函数(声明的类),强制使用new
newcap: true,
//禁用arguments.caller和arguments.callee
noarg: true,
//对于属性使用aaa.bbb而不是aaa['bbb']
sub: true,
//查找所有未定义变量
undef: true,
//查找类似与if(a = 0)这样的代码
boss: true,
//指定运行环境为jquery.js
jQuery: true,
console: true,
module: true
}
}
},
//cssmin
cssmin: {//属性
compress: {//目标
files: {
'dest/car.min.css': [
"src/car.css",
"src/car01.css"
]
}
}
}
//copy
copy: {//属性
main: {//目标
flatten: true,
src: 'src/*.js',
dest: 'dest/'
}
}
//sass以sassStyle 变量存储的方式编译成 根目录下面的 style.css 文件
var sassStyle = 'expanded';
sass: {
output : {
options: {
style: sassStyle
},
files: {
'./style.css': './scss/style.scss'
}
}
}
//watch
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
//require
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
modules: [{
name: 'main'
}],
mainConfigFile: "path/to/config.js",
name: "path/to/almond",
path:{"$": "src/zepto","_": "src/underscore"},
input:{"$","_"},
out: "path/to/optimized.js",
optimize: 'uglify2',
uglify2: {
mangle: false
}
}
}
}
//modules列出要优化的模块
//baseUrl 代表所有的js文件都会相对于这个目录
//mainConfigFile 配置文件目录
//name 会将name对应文件压缩到压缩文件的最前面
//path配置include输入文件里面的指向
//out 输出文件
//优化脚本文件的方式。值只能取uglify,uglify2,closure,closure.keepLines,none中的一个
//使用UglifyJS2进行代码压缩
目标可随意命名;
options属性可以用来指定覆盖内置属性的默认值;可省略不写;
① separator 用于分割各个文件的文字,
② banner 前面说到的文件头注释信息,只会出现一次
③ footer 文件尾信息,只会出现一次
④ stripBanners去掉源代码注释信息(只会清楚/**/这种注释)
grunt 属性含义
通配符:
*匹配任何字符,除了/
?匹配单个字符,除了/
**匹配任何字符,包括/,所以用在目录路径里面
{}逗号分割的“或”操作(逗号后面不要有空格)
! 排除某个匹配
eg:src: ‘{,/}.{png,jpg,jpeg,gif}’
jshint:{
options: {
jshintrc: '.jshintrc'
},
all: {
src: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
}
}
//options属性,指定JSHint应该运行的options属性。
//你可以直接在Gruntfile文件中列出这些选项或者把他们提出来
//放到一个.jshintrc文件中。
filerev: 文件重命名
usemin:资源替换
replace:CDN前缀替换
grunt.config.set(‘info.env’, env)用传参重写配置的默认值。
expand:true 允许动态生成文件
cwd相当于给所有匹配的文件设置一个相对的起点。
ext表示处理后的文件后缀名
require配置文件
shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
webpack使用步骤:
-同grunt使用
- 将当前目录转到项目的根目录下。
- npm init 生成package.json 配置项可直接enter略过。
- 执行npm install命令自动安装项目依赖的插件包node_modules。
- 将webpack命令行(CLI)安装到全局环境中npm install -g webpack
- 新建webpack.config.js进行配置。
- html引入主css、js,js中import react 和react组件和scss文件 执行render。webpack根据js文件中的import引入依赖包以及loader相应文件,即可实现正常操作。
entry
entry:[//entry字符串数组对象均可
‘webpack/hot/dev-server’,
‘webpack-dev-server/client?http://localhost:8080‘,
‘./js/common.js’
],
entry可以是字符串、数组、对象(按需使用,对应output:[name].js)
引入webpack/hot/dev-server 可以实时监听变化 命令行执行webpack-dev-server 现在可访问http://localhost:8080/,
文件css/js生成、变化需执行webpack
需引入基本包:
“babel”: “^6.5.2”,
“babel-core”: “^6.7.6”,
“babel-loader”: “^6.2.4”,
“babel-preset-es2015”: “^6.6.0”,
“babel-preset-react”: “^6.5.0”
loader注意事项:
1,js
{
test: /.jsx?$/, //正则匹配
exclude: /node_modules/, //排除文件
loader: ‘babel-loader’, //loader 从右往左执行
query: {
presets: [‘es2015’, ‘react’],
}
2,scss
{
test: /.css$/,
loader: ExtractTextPlugin.extract(“style”, “css”)
},{
test: /.scss$/,
loader:ExtractTextPlugin.extract(‘style’, ‘css!sass’)
},
在text:/.scss/ …之前仍需要加载css,ExtractTextPlugin使得scss/css文件导出为对应css(to aggregate the CSS into a single file)不可缺少。
scss/css文件中的url(/images/aa.png)为绝对路径