前端比较实用的小工具

个人推荐node环境下的gulp工具，可以极大的提升项目开发速度，并且集成了3000种插件，几乎可以满足所有需求

简单介绍一下如何使用吧：

1. 首先需要在node官网下载安装node环境，可以根据自己的操作系统下载对应版本；

2. 下载后直接使用next安装法，持续下一步就可以了

3. 安装完成后需要在命令行进行node的配置，首先打开系统的开始菜单输入cmd回车或者按下快捷键win+r，输入cmd回车。

4. 输入node –v 查看当前node版本，正常显示版本号表示安装成功

5. node是一个命令行工具，使用这个工具需要用到两个命令

npm install 安装软件

npm uninstall 卸载软件

6. 下面就可以开始使用node的npm命令下载gulp了，首先在命令行中输入

npm install gulp –g 回车后开始下载

7. 下载完成后输入gulp –v 检查gulp版本号，正常显示表示安装成功

8. 在电脑中任意位置（要能找到）创建一个文件夹，起个任意名字（最好英文）

9. 在命令行中进入新创建的文件夹目录mygulp，使用输入盘符回车，如D: 然后使用cd命令依次打开文件夹直到打开新创建的mygulp文件夹。

10. 此时在当前文件夹的命令行中输入npm install gulp —-save-dev 回车，配置局部gulp环境

11. 下载完成后执行gulp –v 会出现全局和局部的版本号，一致为成功，不一致，删除mygulp文件夹中出现的node_modules文件夹，重新执行第10步

12. 命令行中执行npm init 设置配置信息，可以全部为默认，持续回车直到配置完成

13. 下面就可以开始使用gulp了，首先需要在mygulp文件夹中创建gulpfile.js文件。

14. 在gulpfile.js中首先要引入gulp模块，引入gulp模块，

let gulp = require("gulp");然后就可以配置gulp的各种功能指令。

注意：因为node完美支持ES6，所以在node环境中可以使用ES6点所有语法

此时gulp为gulp模块返回的对象，在这个对象中，有一些方法

15. 下面简单几种gulp指令。

1》gulp.task("指令名字",()=>{指令执行函数}) 用于绑定指令

如：

实现功能将线下版本的文件放在线上版本中

gulp.task("index",()=>{

//gulp.src()//找到源文件的目录

//gulp.pipe()//在连缀之中继续调用gulp方法

//gulp.dest()//转存方法

//实现功能的时候，一定要用ruturn

return gulp.src("index.html").pipe(gulp.dest("dist"));

})

在gulp.src中可以接收数组，表示多个文件

文件名可以用*代替，表示通配

**/*表示多层文件夹嵌套

!文件路径，表示除了此文件

2》gulp.watch() 监控文件功能

gulp.task("watch",()=>{

//监控index.html文件，如果发生改变，那么执行index指令

gulp.watch("index.html",["index"]);

})

3》gulp原生默认指令（default）：

default 为gulp自带默认指令，当在命令行中执行gulp后不跟任何指令名的时候，所执行的指令

gulp.task("default",["watch"]); //第二个参数为要执行的命令名，可以接受多个，表示默认执行的指令

以上为gulp的原生指令，能实现的功能有限，但是好在gulp继承了大量的插件可供扩展。

至于插件的使用，可等后续更新。。。

来源：千锋HTML5