前端自动化 package gulp webpack浅析

package.json NPM包的相关信息， 包含各种所需要的模块以及项目的配置信息包括  名称 ， 版本 ， 许可证等 在执行npm init时，会自动下载所有依赖项。

{
  "name" : "packageDemo",　　//当前包（项目）的名字
  "description" : "learn npm package.",
  "keywords" : ["npm", "nodejs", "server", "client", "browser"],
  "author" : "Vivia",
  "contributors" : [],
  "dependencies" : [],//生产依赖
  "devDependencies”:[],//开发依赖
  "repository" : {"type": "git", "url": "https://github.com/viviarui/webapp.git"},
  "scripts": {
    "build": "node build.js"
  }
  "main" : "index.js",　　　//当前项目（包）的入口文件，该文件的导出对象作为该模块的导出对象　
  "version" : "1.1.6"
}           

gulp 基于流的前端自动构建工具，能自动完成文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，部署文件生成，并监听文件在改动之后重复这些步骤。 pipe （前一级输出---后一级输入） 相比grunt (频繁的IO)更加灵活， gulp的API gulp.task() 用来定义任务 gulp .task( name [, deps] , fn ) name  为任务名 deps  是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数 fn  为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

gulp.src() 用来获取流的 globs 参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。 options 为可选参数。通常情况下我们不需要用到。

gulp.dest() 是用来写文件的，其语法为： gulp .dest( path [,options] ) path 为写入文件的路径 options 为一个可选的参数对象，通常我们不需要用到

gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为 gulp .watch( glob [, opts] , tasks ) glob  为要监视的文件匹配模式，规则和用法与 gulp.src() 方法中的 glob 相同。 opts  为一个可选的配置对象，通常不需要用到 tasks  为文件变化后要执行的任务，为一个数组

一个简单的Gulpfile.js配置格式

var gulp = require('gulp');
    var jshint = require('gulp-jshint');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');

    // Lint JS
    gulp.task('lint', function() {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
    });

    // Concat & Minify JS
    gulp.task('minify', function(){
        return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
    });

    // Watch Our Files
    gulp.task('watch', function() {
        gulp.watch('src/*.js', ['lint', 'minify']);
    });

    // Default
    gulp.task('default', ['lint', 'minify', 'watch']);           

webpack 基于NodeJS的模块打包工具，找到JS模块以及其他的一些浏览器不能直接运行的拓展语言，并将其打包为合适的格式以供浏览器使用。把项目当成一个整体，通过一个给定的主文件（index.js）webpack将这个文件找到所依赖的文件，使用loaders处理，最后打包成一个浏览器可识别的JS文件（bundle.js） webpack.config.js是配置文件

module.exports = {
  entry: './index.js',

  output: {
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}