gulp最佳入门@小四

一、安装nodeJs

1. 说明：gulp是基于nodeJS，理所当然需要安装nodeJS;
2. 安装：打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）
3. node -v 查看安装的nodeJS版本，出现版本号，说明安装正确。PS：未能出现版本号，请尝试注销电脑重试。
4. npm -v 查看npm的版本号，npm是在安装nodeJS时一同安装的nodeJS包管理器；

二、npm介绍

1. 说明：npm（node package manager）nodeJs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
2. 使用npm安装插件：npm install <name> [-g] [--save-dev]
   2.1 <name>：node插件名称，例如：npm install gulp-less --save-dev
   2.2 -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用。
   2.3 --save：将保存配置信息至package.json（package.json是nodeJS项目配置文件）；
   2.4 -dev ：保存至pageage.json的devDependencies节点，不指定-dev将保存在dependencies节点；
   2.5 为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。
3. 使用npm卸载插件：npm uninstall <name> [-g] [--save-dev] PS：不要直接删除本地插件包
   3.1删除全部插件：npm uninstall gulp-less gulp-concat......？太麻烦
   3.2 借助rimraf：npm iinstall rimraf -g 用法：rimraf node_modules
   3.3 使用npm更新插件：npm update <name> [-g] [--save-dev]
   3.4 更新全部插件：npm update [--save-dev]
   3.5 当前目录已安装插件：npm list
   3.6 查看npm帮助：npm help
   <meta charset="utf-8">

三、选装cnpm

1. 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常；
2. 淘宝镜像官网：http://npm.taobao.org/
3. 安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
   注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm；安装命令：npm i -g cnpm

四、全局安装gulp

1. 全局安装gulp目的是为了通过她执行gulp任务；
2. 命令提示符执行cnpm install gulp -g
3. 查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装；

五、新建package.json文件

1. package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
2. 命令提示符执行npm init
   注：package.json不能添加注释

六、安装gulp插件

1.定位目录后命令提示符执行npm install gulp-sass --save-dev

2. 将会安装在node_modules的gulp-sass目录下
3. 为了能正常使用，我们还得本地安装gulp：npm install gulp --save-dev
   PS：我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

七、新建gulpfile.js文件

• gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通JS文件（其实将gulpfile.js放入其他文件夹下亦可）

/* create by wyunfei */
let gulp = require('gulp'); // 引入本地gulp
var concat = require('gulp-concat'); // 合并JS的插件
/*
  task定制任务
* src方法是指定需要处理的源文件的路径
* dest方法是指定处理完后文件输出的路径；
* .pipe()管道，前一个的输出就是后一个的输入
* */
// 配置合并js任务
gulp.task('jsTask', function () {
    gulp.src('./src/components/**/*.js') // 第一步：找到原材料(源文件)
        .pipe(concat('all.js'))   // 加工
        .pipe(gulp.dest('./dist/js')) // 出厂
})

// 在小黑窗执行"gulp jsTask" 命令就可以在根目录下生成dist/js/all.js文件

八、运行gulp

8.1，命令提示符（小黑窗）执行：gulp 任务名称
8.2，合并js：执行gulp jsTask命令
8.3，当执行gulp default或gulp将会调用default任务里的所有任务[‘jsTask’,’...’]

同学们听我说