构建工具

前端的工作中会用到各种基于Node的构建工具，现在我们就来一起比较一下各种构建工具的优劣。

　　国内下载一些npm库速度不是很快，多亏了淘宝的程序员推出了cnpm（国内的镜像，具体使用时 将npm换成cnpm）

安装各种插件都是基于npm，npm地址 

构建工具的全局命令行实现原理：

　　npm会在环境变量（在我的电脑右键 属性 --> 高级系统设置 --> 环境变量） path 中添加 npm全局安装包的路径，

　　npm安装全局包的时候会检查 项目中 package.json的bin属性，

　　之后会在npm路径中创建一个可执行文件( 比如 grunt ，grunt.cmd )来执行对应的指令

npm的依赖文件在package.json中

Grunt篇

　　官网   中文网

　　安装全局的命令行支持

　　　　npm i grunt-cli -g

　　安装本地

　　　　npm install grunt --save-dev

　　API：

　　　　grunt.initConfig 配置插件参数

　　　　grunt.loadNpmTasks 加载相应的插件本地依赖包

　　　　grunt.registerTask 注册任务

　　Gruntfile.js编写

　　　　

//node的模块管理
module.exports = function(grunt) {

  //配置任务数据
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。 相当于 require 相应包的过程
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。 注册相应的任务
  grunt.registerTask('default', ['uglify']);

};

Gulp篇

　　官网  中文网

　　

　　安装全局的命令行支持

　　　　npm install --global gulp

　　安装本地

　　　　npm install --save-dev gulp

　　API

　　　　gulp.src 读取符合glob的文件并符合 vinfy 的stream

　　　　gulp.dest 将pipe流写入文件

　　　　gulp.task 定义任务并编写任务执行方式

　　gulpfile.js编写

var gulp = require('gulp');
var concat = require('gulp-concat');//文件合并
var uglify = require('gulp-uglify');// 代码压缩

gulp.task('1', function() {
    // 任务一 会在default执行之前执行
    console.log(1);
    gulp.src('js/*.js') // 匹配 '/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build')); // 写入 'build/somedir/somefile.js'
});

gulp.task('default', ['1'], function() {
    // 将你的默认的任务代码放在这
    console.log('default')
});

webpack篇

　　官网   中文网

　　安装全局的命令行支持

　　　　npm install -g webpack

　　安装本地

　　　　npm install --save-dev webpack