从零开始的gulp使用之旅
step1：安装node.js
从node官网上下载node.js，注意不要下载最新版本，最新版本一般都不稳定，就笔者目前情况而言8.0版本就足够了。理论上node傻瓜包会自带环境变量的安装，如果仍然不行请按照网上的提示安装。例如：https://www.runoob.com/nodejs/nodejs-install-setup.html
官方网址： https://nodejs.org/en/
下载之后，安装git软件。
官方网址： https://git-scm.com/download/win
当然理论上你也可以使用普通的cmd窗口，但是git有各种各样方便的功能，例如：记录历史操作——它会记录用户在其上使用过的所有命令，按下键盘的[上]，便可搜索，而且<strong>记录不会随着关闭窗口，关闭系统而消失</strong>，其他的还有<strong>下载github仓库代码，右键gitbush here命令可以直接让git进入当前目录（不需要反复的cd进入目录）</strong>等等强力的功能。
step2：安装npm
打开git（右键gitbush here）或者cmd窗口。
理论上在安装node的时候npm就已经安装好了，使用以下命令确认安装情况：
// node版本信息
node -v
// npm版本信息
npm -v
如果有错，请看：https://blog.csdn.net/zimushuang/article/details/79715679
step3：安装gulp
gulp工具非常强大，从提供本地服务器到各种插件的提供应有尽有，首先我们安装<strong>全局gulp</strong>。
npm install gulp -g
使用该命令会安装gulp到全局，无论在任何位置都可以使用以gulp打头的命令。当然，一般来说这个阶段我们都只用一个命令：
npm install gulp --save-dev
这段命令会安装gulp到<strong>窗口目前所在目录下</strong>，也就是说你cd或者gitbush here到的目录下。使用了这个命令后，该目录下会出现大量node_modules文件夹，里面是各种工具，这个暂且不说。
step4：新建package.json文件
该文件是gulp的配置文件，你可以使用
gulp init
按照提示一步步的去生成（一般来说填一个项目名称就够了），也可以从其他项目中考一个干净的json过来使用。
step5：填充文件结构
将html，css，js，image等文件，文件夹依次放进来。也可以使用一个优达默认的文件结构：
https://github.com/udacity/ud892
step6：创建gulpfile.js
如果你已经从其他项目上拷过来了该文件，确定一下你已经安装了gulpfile.js中需要安装的工具了。
该文件是工具管理文件，工具的使用，gulp的使用基本上都在这里进行。下文是一个简答的gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('default', function() {
gulp.watch('sass/**/*.scss',["styles"])
});
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(gulp.dest('./css'));
});
里面添加了两种工具：
gulp-sass：使用sass编译css，基本上css并不是直接写出来的，而是通过sass和同类型的工具一起编译出来，这样程序猿就只需要编写基本css，剩下的压缩和兼容都会由他去完成。
gulp-autoprefixer:编译时自动添加兼容写法。当你在sass中写代码，而该css有兼容写法时，编译之后便会在生成文件的css中添加这些兼容代码：
// sass文件
.main-page {
width: 300px;
height: 300px;
background: red;
animation: anim 3s linear both infinite;
}
@keyframes anim{
0% {background: yellow}
50% {background:green}
}
// 编译后的css文件
.main-page {
width: 300px;
height: 300px;
background: red;
-webkit-animation: anim 3s linear both infinite;
animation: anim 3s linear both infinite;
}
@-webkit-keyframes anim {
0% {
background: yellow;
}
50% {
background: green;
}
}
@keyframes anim {
0% {
background: yellow;
}
50% {
background: green;
}
}
以上工具便可以构成一个基本的项目代码。
项目命令集合：
npm install gulp -g
npm init
npm install gulp --save-dev
// 插件安装代码都一样npm install XXX
npm install gulp-sass --save-dev
npm install gulp-autoprefixer --save-dev
// 将文件结构补完
// 使用gulp命令，如
// 执行默认命令
gulp
// 上文中gulpfile.js中第九行创建的styles命令：
gulp styles
后期注意（重要）：
- npm使用起来非常坑而且需要翻墙，所以我们需要将npm换源，换成淘宝源：
// 换源
$ npm config set registry https://registry.npm.taobao.org/
// 查看
$ npm config get registry
- 使用watch动态监听文件修改
gulp.watch('sass/**/*.scss',["styles"])
使用工具的时候，我们总是一遍又一遍的手动编译，然后等待，最后刷新页面查看结果，但是使用watch代码可以帮我们自动编译，当检测到文件有被修改（参数1），就会执行命令styles（参数2）。
网友评论