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: "./" } }); });