gulp的安装和配置详解

gulp的安装和配置详解

1.安装node.js

 先下载一个node.js安装包。

下载完成后双击即可。
打开cmd，命令行输入node -v，回车输出nodejs版本号，表示安装成功。
命令行输入npm -v,回车输出npm版本号，表示安装成功(nodejs集成了npm)。
由于npm不稳定，下载速度慢，建议使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org,命令行输入cnpm -v，回车输出cnpm版本号，表示安装成功。以后安装就使用cnpm命令。

2.安装gulp

命令行输入cnpm install gulp -g,等待安装，输入gulp -v 回车输出gulp版本号，表示安装成功。

3.生成package.json文件

在本地新建一个文件夹，命令行切换到当前文件夹，我是在D盘下新建一个名为gulptest的文件夹。

命令行输入cnpm init,回车回车回车，生成package.json文件，内容如下：

4.本地安装gulp以及我们需要gulp的插件

现在开始步入正轨，本地安装gulp以及我们需要gulp的插件：
4.1本地安装gulp
命令行输入cnpm install gulp --save-dev
安装完成后我们可以查看package.json的变化

package.json文件多出了

 "devDependencies": {
        "gulp": "^3.9.1"
      }

"gulp": "^3.9.1"就是我们刚本地安装的gulp及版本号
可能有的人会问：为什么gulp安装了两次？
答：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

继续安装我们需要gulp的插件吧！

cnpm install gulp-less gulp-watch gulp-concat gulp-minify-css --save-dev

安装完成后我们可以查看package.json的变化,又多出了几个插件，暂时先安装这几个gulp插件。

5.配置gulpfile.js文件

在项目根目录下创建gulpfile.js文件，记住必须名字必须是gulpfile。

• gulp-less 编译less

将gulpfile.js配置成如下图，再在命令行输入gulp即可编译less文件。

• gulp-watch 自动编译less（监听事件）

编译less生成css文件算是完成了，但每次修改less之后都要手动执行一遍gulp命令，很明显这是不科学的，于是需要一个监听事件的插件，那就是gulp-watch，配置如下图，命令行执行gulp-watch,当less发生改变时，一按下保存将自动执行gulp-watch命令进行编译。我们也可以将testWatch任务放到默认任务里执行gulp.task("default",["testLess","testWatch"]);命令行执行gulp即可。

但当less文件出现语法错误的时候，我们习惯性的按下保存或是编译器带有自动保存功能时，watch可能会中断，再次编译时需要我们再次输入命令。解决的办法是：引入gulp-plumber模块（本地已安装直接引入即可，如未安装需cnpm install gulp-plumber --save-dev安装到当前项目下），这样就能处理出现异常而且不终止watch事件。

到这里我们已经完成了less的自动编译，当我们想在编码时查看出现了什么异常而又不想每次出现异常就去查看命令时，我们可以用到gulp-notify。先是安装，引入，再在plumber()括号内加入{errorHandler: notify.onError('Error: <%= error.message %>')}，当出现异常时屏幕右下角就会弹出一个异常信息的窗口。

• 合并css文件
  在工作中，我们可能会编译出多个css文件，这就需要我们进行合并处理。gulp-concat

可以帮我们做这件事，在gulpfile引入gulp-concat(确保已安装);

less()执行完将编译后的css文件进行合并，重新命名为stylesheet.css，再将其输出到css文件夹下。
我们也许需要进行压缩处理，并重命名为-min.，引入gulp-rename和gulp-minify-css(确保已安装);

这时会输出两个多输出一个-min的文件。
less自动编译css已经完成了。