Grunt、webpack个人笔记

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）为绝对路径