gulp前端自动化工作流
gulp前端自动化工作流
为什么要有自动化的流程？
在我们的开发过程中有大量的重复操作
DRY Don't repeat yourself
开发人员的精力应放在哪？
创造，新的一切前端开发的编译操作
Gulp
Gulp简介
链接：
懒得看介绍的直接看这里：就是用来机械化的完成重复性质的工作
gulp的机制就是将重复工作抽象成一个个的任务，
gulp是前端开发过程中一种基于流的代码构建工具，
是自动化项目的构建利器；
她不仅能对网站资源进行优化，
而且在开发过程中很多重复的任务能够使用正确的工具自动完成；
使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器
她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，
并监听文件在改动后重复指定的这些步骤。
在实现上，她借鉴了Unix操作系统的管道（pipe）思想，
前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具 在流中，
定义了一些处理数据的基本操作，如读取数据，写入数据等 程序员是对流进行所有操作的，
而不用关心流的另一头数据的真正流向 而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。
这看起来有点像jQuery的方法，把动作串起来创建构建任务
gulp的优点：
易于使用
通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
构建快速
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
易于学习
通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
插件高质
gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
4.2.Gulp准备工作
安装Node.js
安装 gulp 命令行工具
通过npm下载gulp
$ npm install -g gulp
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，
然后在命令行中执行：
$ npm install gulp
如果想在安装的时候把gulp写进项目package.json文件的依赖中，
则可以加上
--save-dev： npm install --save-dev gulp
这样就完成了gulp的安装，接下来就可以在项目中应用gulp了。
先来个demo
根目录建立gulpfile.js文件（gulp的主文件） 将以下代码粘贴到该文件中：
var gulp = require('gulp'); gulp.task('default',function(){ console.log('hello gulp'); });
运行gulp任务 在命令行或者终端中将目录切换到gulpfile.js所在的目录，
执行： $ gulp
正常情况控制台会输出 hello gulp
Gulp本身只有四个函数，在项目中新建一个gulpfile.js文件
gulp.src(); 取一个文件
gulp.dest();设置一个文件输入重点文件
gulp.task();创建一个任务
gulp.wacth（）；监听一个文件
再通过cmd输入gulp + 执行任务名称。
初始化 gulp 项目
一般写好一遍就能反复利用了，下面给个参考：
/** * gulp的主文件，用于注册任务 * @Author: iceStone * @Date: 2017-08-17 17:07:26 * @Last Modified by: zzc * @Last Modified time: 2017-08-17 14:06:23 */ 'use strict'; // 此处代码都是由NODE执行 // 载入Gulp模块 var gulp = require('gulp'); var less = require('gulp-less'); // 注册一个任务 gulp.task('copy', function() { // 当gulp执行这个say任务时会自动执行该函数 // console.log('hello world'); // 合并 压缩之类的操作 // 复制文件 // gulo.src取一个文件 gulp.src('src/index.html') .pipe(gulp.dest('dist/')); // 将此处需要的操作传递进去 }); gulp.task('dist', function() { // 监听这两个文件，只要这两个文件改了任何一步， // 都会执行copy、style两个函数进行文件更新 gulp.watch('src/index.html', ['copy']); gulp.watch('src/styles/*.less', ['style']); }); var cssnano = require('gulp-cssnano'); gulp.task('style', function() { gulp.src('src/styles/*.less') //拿这个文件路径里面所有的less .pipe(less()) // 该环节过后就变成了CSS文件 .pipe(cssnano())//压缩 .pipe(gulp.dest('dist/css/'));//放到这个文件夹里 }); var browserSync = require('browser-sync').create(); // Static server gulp.task('serve', function() { browserSync.init({ server: { baseDir: "./" } }); });
