前端自动化之gulp

Posted 2020-08-28

随着现在前端技术的不断发展和前端项目开发更新速度的要求，前端自动化越来越受到重视，之前传统的前端开发方式已经越来越不能满足开发的需求了，于是各种自动化工具随之产生了。而gulp就是其中一款非常强大的工具。

1.安装node.js：
由于gulp是基于node.js的。所以首先需要安装node.js，node下载地址：http://nodejs.cn/download/ 安装比较简单。
安装完成之后在cmd里输入：node -v 查看安装的node版本。 npm -v  查看安装的npm 版本

2.全局安装gulp：
执行 npm install gulp -g
注：全局安装gulp是为了执行gulp任务
安装完成之后在cmd里输入：gulp -v  查看安装的gulp 版本。

3.新建一个项目  项目文件根目录新建package.json
执行 npm init 来新建自动package.json
注：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件重点内容 在创建过程中有一些配置信息，可以根据自己需要配置

4.现在就可以在项目根目录下安装gulp的各种插件了：
执行  npm install 插件名称 --save-dev
注：gulp的插件有非常多，而且很多实用的插件：
常用插件
sass的编译（gulp-sass）
less编译 （gulp-less）
重命名（gulp-rename）
自动添加css前缀（gulp-autoprefixer）
压缩css（gulp-clean-css）
js代码校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
压缩图片（gulp-imagemin）
自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）
图片缓存，只有图片替换了才压缩（gulp-cache）
更改提醒（gulp-notify）
5.在项目根目录下新建gulpfile.js文件
注：gulpfile.js文件为gulp执行的脚本文件，可以自定义执行插件和执行顺序等。
具体实例可以参考：http://www.gulpjs.com.cn/

本文转载！