gulp前端自动化工作流

gulp前端自动化工作流

为什么要有自动化的流程？

在我们的开发过程中有大量的重复操作

DRY Don't repeat yourself

开发人员的精力应放在哪？

创造，新的一切前端开发的编译操作

Gulp

Gulp简介

链接：

http://gulpjs.com/    官网

http://www.gulpjs.com.cn/   中文网

就是用来机械化的完成重复性质的工作

gulp的机制就是将重复工作抽象成一个个的任务，

4.2.Gulp准备工作

安装Node.js

安装 gulp 命令行工具

通过npm下载gulp

 

$ npm install -g gulp

Gulp本身只有四个函数，在项目中新建一个gulpfile.js文件

gulp.src(); 取一个文件

gulp.dest();设置一个文件输入重点文件

gulp.task();创建一个任务

gulp.wacth（）；监听一个文件

再通过cmd输入gulp + 执行任务名称。

初始化 gulp 项目

创建任务 - gulpfile.js

常用插件

• 编译 Less：gulp-less

• 创建本地服务器：gulp-connect

• 合并文件：gulp-concat

• 最小化 js 文件：gulp-uglify

• 重命名文件：gulp-rename

• 最小化 css 文件：gulp-minify-css

• 压缩html文件 gulp-minify-html

• 最小化图像：gulp-imagemin