在互联网飞速发展的今天，自从node出现后，我们的前端变得越来越大（感觉很美~），web业务也变得越来越复杂和多样化，型号也不一样。好久没有从webPage模式转成webApp模式了，好久没几个页面上几个jquery插件就可以完成一个项目了，以前还需要压缩代码，压缩图片，上传到服务器等需要各种工具才能实现的功能，使用起来很麻烦。于是各种前端构建工具应运而生：grunt、gulp、webpack等成为了前端开发工程师的必备技能之一。最新的Parcel也是风头正劲，因为Webpack提供的“零配置”进展缓慢，不明朗，不过现在webpack4.0已经发布，未来会怎样就不清楚了~好了说了这么多，今天该说说了，虽然已经不再是尖端技术，但是非常简单方便，人性化。简单介绍下基本用法吧~安装好node后，打开命令行执行以下代码：npminstall--globalgulp全局安装gulp，打开命令行输入gulp-v如果有版本号就证明了安装成功然后创建一个文件夹，名字随便你~我们接下来的操作都在这个文件夹里进行~我创建的文件夹叫gulpexample。如果你的电脑上安装了git，请进入这个文件夹，右键选择gitbashhere。如果没有安装，输入cmd，进入对应的文件目录~然后~执行npminit后，会要求你填写名称，作者，描述，其他的，你直接回车，然后一个package。在你的文件夹下会自动生成json文件，然后在命令行执行npminstalgulp--save-dev在当前项目中安装gulp。现在gulp已经安装好了。接下来我们可以在根目录下新建一个文件，在根目录下命名为gulpfile.js（必须是这个，不能改）。穿个文件夹src来简单介绍一下gulp的api/***gulp.task--定义任务*gulp.task('任务名，给你命名',fn);*gulp.src--找到需要的文件执行任务*gulp.src('要执行的文件的目录').pipe(要执行的api)*gulp.dest--执行任务的文件的目的地*gulp.dest('待执行文件所在目录（如果没有则返回创建文件夹）')*gulp.watch--观察文件是否发生变化*gulp.watch('待监控文件目录下的文件','待执行任务executedafterthechange')***/然后我们简单的打开gulpfile.js，输入如下代码：vargulp=require('gulp');//定义任务gulp.task('message',function(){返回缺点ole.log('gulp正在运行！');});然后在当前文件夹目录下的命令行中执行gulpmessage，可以看到gulp正在运行证明任务已经执行完毕。接下来给大家简单介绍一下：复制文件、压缩合并js、sass编译、压缩图片的使用首先安装以上功能对应的插件（也在对应目录下执行）受不了可以安装淘宝的镜像cnpm，用cnpm执行~cnpm的安装如下：npminstall-gcnpm--registry=https://registry.npm.taobao.org安装gulp插件后，在项目根目录src新建文件夹，打开gulpfile.js开始配置~；第一步，导入插件//导入gulp和插件vargulp=require('gulp');varimagemin=require('gulp-imagemin');//图像压缩varuglify=require('gulp-uglify');//js压缩varsass=require('gulp-sass');//sass编译varconcat=require('gulp-concat');//代码合并的第二步，定义任务先定义一个简单的任务，熟悉一下gulp的用法~先定义一个复制html的任务。任务一、复制html//task:copyhtmlgulp.task('copyHtml',function(){//选择转到src目录下的所有html文件（为了测试效果，请在src下创建两个html文件directoryyourself)gulp.src('src/*.html').pipe(gulp.dest('dist'));//复制html到dist目录下，如果没有dist会自动生成});在命令行执行gulpcopyHtml，去看看你的文件夹里有没有复制成功？任务2，图片压缩准备：在src目录下新建一个images文件夹，里面放几张图片//任务：图片压缩gulp.task('imagemin',function(){gulp.src('src/images/*').pipe(imagemin())//调用插件imagemin.pipe(gulp.dest('dist/image'))//压缩图片输出目录});同样在命令行执行gulpimagemin完成输出。现在你应该对gulp任务是如何编写的有了基本的了解。接下来的几个任务我就不细说了，直接去代码//sass编译src目录下的文件夹sass并在里面新建一个sass文件，按照sass的语法写一些样式gulp.task('sass',function(){gulp.src('src/sass/*')//获取sass文件(*.scss).pipe(sass().on('error',sass.logError))//执行sass插件并检查errors.pipe(gulp.dest('dist/css'));//输出css文件的路径});//合并压缩代码，在js下新建文件夹src目录并在其中创建几个js文件gulp.task('scripts',function(){gulp.src('src/js/*.js')//获取js文件.pipe(concat('main.js'))//将文件合并到main.js.pipe(uglify())//压缩jscode.pipe(gulp.dest('dist/js'))//输出合并压缩后的文件路径});4个API我们现在用了3个，还有一个watch用于监控，没用，简单介绍一下。字面意思就是监视对应目录下的文件是否发生变化。如果任务发生变化，一个参数是监控目录，另一个参数是要执行的任务。（watch是一个持续执行的任务，结束了不会停止）代码如下：//监听文件是否变化gulp.task('watch',function(){gulp.watch('src/js/*.js',['scripts']);//监控src/js/下的所有js文件，有变化则执行任务脚本，同下gulp.watch('src/sass/*',['sass']);gulp.watch('src/*.html',['copyHtml']);gulp.watch('src/images/*',['imageMin']);});现在有5个任务（6个包括初始消息）。每个任务都要执行命令行是不是很麻烦？如果任务多了会更烦，不用担心，gulp已经为我们准备好了默认任务default//定义默认任务，这里的默认任务不能随便定义，只能是默认的，还有一个后面接受数组作为参数，传入默认执行的任务，也可以接受一个回调函数，稍后执行默认的任务代码。Gulp.task('default',['message','copyHtml','sass','scripts','imageMin','watch']);如上定义默认任务后，在命令行输入gulp回车，所有任务按参数顺序执行。结语今天的gulp分享到此结束~希望能对大家有所帮助。本次分享只是入门教程。它简要介绍了基本用法。实际项目中更复杂的用法以后会分享给大家~喜欢的话点个赞（谢谢），后续通知会在本周发布webpack的相关介绍分享给大家，还有将本文发表在segmentfault、个人微信公众号Mopecat和个人博客https://mopecat.cn/欢迎大家点赞关注水~公众号二维码：
