前端构建工具使用与对比

一、安装node

二、验证node、npm是否安装成功

npm文档：https://www.npmjs.com.cn/all/#

三、使用

1、NRM：是NPM的一个包，是NPM registry 管理工具，能够查看和切换当前使用的registry。

a、安装：npm install -g nrm

b、nrm ls：列出所有的NPM镜像文件

c、nrm test:测试各个镜像的作出回应时间

d、nrm use taobao：将镜像切换到淘宝镜像

四、构建工具介绍

1、fis3

eg：http://www.open-open.com/lib/view/open1452002802667.html

文档：http://fis.baidu.com/fis3/docs/beginning/release.html

配置项目根目录   fis3 release -d <path>

2、grunt

文档：http://www.gruntjs.net/getting-started

eg：http://www.cnblogs.com/tugenhua0707/p/3497488.html

步骤：1、新建工程目录，在工程目录中放置package.json文件：

包含grunt-contrib-uglify插件（用于压缩js）及grunt-contrib-concat 插件(用于合并文件)

           2、运行工程：npm install

           3、在工程根目录下创建文件存放js、css文件

           4、在工程根目录创建一个Gruntfile.js：配置需要压缩的文件

           5、grunt运行

3、webpack

文档：https://www.webpackjs.com/concepts/entry-points/

入口

输出

loader

插件

4、gulp

文档：https://www.gulpjs.com.cn/

eg：http://www.cnblogs.com/2050/p/4198792.html

简述：

1、安装：全局  npm install -g gulp   

项目单独：npm install gulp      

npm install --save-dev gulp（把gulp写进项目package.json文件的依赖中）

2、新建gulpfile.js文件

作为主文件

3、运行

4、重点API

gulp.task()

gulp.src()

gulp.dest()

gulp.watch()