现在，移动端发展蓬勃，前端工程化越来越复杂，于是推出了很多自动化构建工具。Gulp等就是最好的代表。如果你是一个初接触gulp的前端小白，又不想看官方过多的解释又想了解gulp，那么这篇文章非常适合你。喜欢的话希望大家点个赞，不喜欢的不要喷，毕竟我不是前端达人，只是想分享一些自己的心得和心得为需要它的人使用gulp。1、gulp到底是什么？很多人去百度都会得到这样的答案，那就是自动化构建工具，那么什么是自动化构建工具呢？其实简单来说就是一个工具，这个工具的作用如下图所示。你现在看到的图片是我使用gulp的一个基本项目结构，这里的src文件就是我们的源文件。dist是gulp编译出来的文件（后面会详细解释各个文件的作用）。现在，请想一想这样一个问题。如果我让在线网站（不管是PC端还是手机端）使用css文件、JS文件、图片文件等静态资源，JS被压缩，css被压缩，图片（主要是Sprite图片）也被压缩，以减小体积文件并提高浏览器的性能。所以我该怎么做？如果我们在项目中使用LESS，或者SASS作为CSS的预编译语言（浏览器本身不支持LESS和SASS文件，难道每次都要用类似Koala的软件来处理这些吗？）如果我想找点东西来帮我处理上面的事情。我还是写未压缩的JS或者CSS/less/sass等，但是实际运行在页面上（或者项目发布的时候换成压缩文件），那么gulp对你来说是个不错的选择。那么现在，你明白gulp是干什么用的了吗？是的，就是对上面的东西进行处理，而我们在编辑器中修改的代码都在src目录下，而dist文件目录就是上面处理后的文件目录，称为编译后的文件目录，而Gulp就起到了这个桥梁的作用二、gulp简介首先希望大家明白gulp是一个基于node.js的工具。如果您的计算机上没有node.js，则无法运行gulp。（这里只需要在官网下载node.js然后基本像傻瓜一样进行下一步安装，具体请自行百度，因为很简单，这里就不介绍了...！3、npm和cnpm的区别什么是npm？其实这个问题并不难回答。这是一个基于node.js的包管理工具。更简单的说，我们可以使用npm工具来下载我们想要的包。这些包就是我们后面需要的各种插件（比如压缩JS代码的插件，压缩CSS代码的插件），通过npm等工具下载到我们的电脑上。什么是cnpm？在中国，就会有这样的问题。我们想访问国外的网站，大多数都非常慢。那么npm和node.js都是老外创造出来的，那么我们也必然面临这样一个问题，就是我们用npm下载东西的时候会很慢，而cnpm就是这样一个解决工具。cnpm是阿里巴巴出品的，会自动和官方npm同步，但是我们在国内下载速度很快，解决了我们要翻墙的情况。如何安装cnpm？请在cmd窗口命令中输入npminstall-gcnpm--registry=https://registry.npm.taobao.org，然后回车等待成功。详情请参阅CNPM4。如何安装吞咽？这里我们假设你已经安装了node.js和cnpmA：在cmd窗口输入cnpminstall--globalgulp回车等待安装（注：在gulp中文网可以写npminstall--globalgulp，但是我们已经安装了cnpm，所以可以用cnpm代替npm，所以命令会改为cnpminstall--globalgulp)，可以参考gulp中文网B：如果要查看是否安装成功，可以在cmd窗口输入gulp-v命令，只要有版本就行（版本好，证明是OK的）。如果显示到此为止，gulp的安装就结束了。5、相关配置文件说明如图所示，dist和src文件已经介绍了各自的职责。这里重点介绍package.json文件和gulpfile.js文件的功能。package.json文件。它只是一个json文件，记录了我们使用的插件和版本号"author":"","license":"ISC","devDependencies":{"gulp":"^3.9.1","gulp-autoprefixer":"^3.1.0","gulp-concat":"^2.6.0","gulp-imagemin":"^3.0.1","gulp-jshint":"^2.0.1","gulp-less":"^3.1.0",//比如这里是处理LESS文件，将LESS编译成.css文件"gulp-minify-css":"^1.2.4","gulp-notify":"^2.2.0","gulp-rename":"^1.2.2","gulp-uglify":"^1.5.4","gulp-watch":"^4.3.8"//这是我的package.json的部分文件内容//你应该很了解他的作用吧？XXX目录下的文件。比如我的src目录下有一个css文件夹，里面有很多css或者LESS等样式文件。现在我想通过gulp把它编译到dist目录下的css文件夹里，这个css文件夹里的style文件还是压缩的。那么gulpfile.js就起到了这样的作用。//下面我将我的gulpfile.js文件的内容作为案例vargulp=require('gulp');//基础库varless=require('gulp-less');//编译less工具varconcat=require('gulp-concat');//文件合并varuglify=require('gulp-uglify');//压缩JS文件//首先require的意思是从你的电脑加载某个gulp插件，比如require('gulp-less')//请注意：要加载这些插件，您需要在您的计算机上安装这些插件。具体请自行百度，很简单，两行CMD命令就可以了。//配置文件路径varpaths={src_html:"./src/**/*.html",//src_变量以源文件的文件目录开头src_less:"./src/css/**/*.less",//less文件src_css:"./src/css/**/*.css",//css文件src_json:"./src/**/*.json",//json格式文件src_images:"src/images/**/*",src_pic:"src/pic/**/*",//表示src文件下的pic文件中的所有文件src_js:./src/js/**/*.js",src_text:"./src/**/*.text",dist:"./dist",//dist_变量以编译文件目录开头dist_css:"./dist/css",//dist文件夹中的css文件dist_mincss:"./dist/mincss",//dist文件夹中的mincss文件dist_images:"dist/images",dist_html:"./dist/**/*.html",dist_pic:"dist/pic",dist_js:"./dist/js",dist_minjs:"./dist/minjs"}//styletaskgulp.task('styles',function(){//gulp.task是告诉gulp编译什么用什么处理方式比如我这里编译less文件gulp.src([paths.src_less]).pipe(less())//然后把编译好的文件输出到指定文件夹.pipe(gulp.dest(paths.dist_css))});//HTML任务gulp.task('html',function(){//编译html文件returngulp.src([paths.src_html,paths.src_json,paths.src_text]).pipe(gulp.dest(paths.dist))//输出到指定文件夹//提醒任务完成.pipe(notify({message:'html,json,textisOK'}))});gulp.task('scripts',function(){//编译js文件内容等，也可以创建其他任务，比如图片returngulp.src([paths.src_js]).pipe(gulp.dest(paths.dist_js))//输出到指定文件夹.pipe(notify({message:'ScriptsisOK'}))//提醒任务完成});监听文件变化//下面的代码是gulpfile.js的最后一点代码，它的作用是监听哪个文件发生了变化，然后编译到dist文件夹中//监听文件gulp.task('watch',function(){//监控less,sass,cssgulp.watch([paths.src_less,paths.src_css],['styles','html'])//监控jsgulp.watch([paths.src_js],['scripts'])//监控图片gulp.watch([paths.src_images],['images'])//监控hhtml,json,textgulp.watch([paths.src_html,paths.src_json,paths.src_text],function(event){gulp.run('html')});})大功告成，准备启动gulp首先，我们落入工程文件，也就是src和dist的父集文件，然后进入命令cnpminstall初始化node_models模块（如果没有安装node模块，会根据package.json文件下载对应的node模块，放到node_models文件中，这个我们不用去folder）然后在cmd里面输入gulpwatch，也就是监听的意思，然后就OK了，如图，就OK了，现在你在src文件目录下修改了什么文件，它将被编译成dist文件。Gulp有很多好处，比如处理CSS预编译语言，压缩，或者把EC6编译成EC5。文章到此结束。希望对您有所帮助。我觉得喜欢就点个赞吧，或者收藏起来，或者分享给其他人。请不要触摸那些感觉不好的。毕竟我不是大牛。本文仅针对刚接触gulp的前端新手
