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已经完成了。