gulp自动化构建工具使用总结

Posted 2020-10-02

简介：

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

 

gulp常用地址：

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424

 

1、gulp安装步骤

　　安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

（1）安装nodejs

　　官网：http://nodejs.org/  下载安装

（2）全局安装gulp

　　cnpm install gulp-less --save-dev

（3）cnpm

　　淘宝镜像：npm install cnpm -g --registry=https://registry.npm.taobao.org

　　3.2、使用npm安装插件：命令提示符执行  npm install <name> [-g] [--save-dev]；

　　　　3.2.1、<name>：node插件名称。例：npm install gulp-less --save-dev

　　　　3.2.2、-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；

　　　　　　　　 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

　　　　3.2.3、--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

　　　　3.2.4、-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

　　　　3.2.5、为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，

　　　　　　　　其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）

　　3.3、使用npm卸载插件：npm uninstall <name> [-g] [--save-dev]  PS：不要直接删除本地插件包

　　　　3.3.1、删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

　　　　3.3.2、借助rimraf：npm install rimraf -g 用法：rimraf node_modules

　　3.4、使用npm更新插件：npm update <name> [-g] [--save-dev]

　　　　3.4.1、更新全部插件：npm update [--save-dev]

　　3.5、查看npm帮助：npm help

　　3.6、当前目录已安装插件：npm list

（4）项目安装gulp以及gulp插件

　　本地安装gulp ：cnpm install gulp --save-dev ；

　　PS：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

　　gulp插件安装：cnpm install gulp-less --save-dev；