gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp

gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp

相信大家一定听说过gulp或者webpack，grunt等前端构建工具，这些是做什么用的我也不知道，也许他们会和一些前端框架用到一起，让开发起来更方便吧。比如说vue框架脚手架里用到了webpack。。。好像跑题了 。

言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了不要喷我啊。毕竟我也是一个菜鸟。写下这篇笔记的，不是为了证明什么。就是方便我以后忘了时候回顾看一下。好，废话不多说 下面开始了

虽然是菜鸟级别的教程。 但是最起码读者你应该 html css 和 js jquery吧。你要是这个都不知道，那我真的帮不到你了。 好像又说废话了， 好 下面这你的要开始了

工欲善其事必先利其器 安装好我们需要的工具

1首先要安装node.js 这个就不用教了吧，我相信大家都已经安装过了，百度node进入官网，安装的时候 一路下一步。和安装QQ一样。

2我们要有自己的命令行工具，window死 系统的用户推荐使用 gitbash 或者github 自带的命令行工具。 本菜鸟用的就是github 命令行工具(其实这都无所谓)

3自己的编辑器，

1首先新建一个项目目录，并且里面新建两个文件 一个build 一个src文件

(前面加个a能让他排到编辑器项目的最上面我点的方便，所以不要纠结啊)

src目录是我们开发的目录就是里面放你css文件，js文件，图片和html文件，build目录是gulp处理之后存放的目录，将来我们就是拿build目录里面的东西放到服务器上的

然后用自己的命令行工具 进入到项目目录里


命令行进入项目目录(是和src，build同级目录) 用的是cd命令 。(这点大家都应该知道吧)

我们都知道node.js 自带一个一个npm包管理工具，这个工具是给我们提供安装我们需要的依赖用的(不懂的不用纠结一会看图说话)。因为npm网速有点慢 我这里用的cnpm 淘宝镜像。。

打开命令行 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 回车 这里安装cnpm cnpm安装好后之后所有 我们安装依赖的时候把所有的npm 换成cnpm 速度会大大提高；

cnpm 安装好后 全局安装gulp 命令行输入 cnpm install -g gulp 回车 好，目前我们cnpm 和 全局gulp已经安装好。

用命令行进入项目目录（好像已经进入过了），输入命令 npm init -y 回车 (这是npm初始化一个目录吧，只要记住就好了) 初始化完是这个样子的


初始化完成之后你会发现你的项目目录里多了一个package.json文件这个文件是npm的配置文件(一般不用管他)

package.json文件出来后，我们在他的同级目录，(也就是项目目录) 自己新建一个gulpfile.js 的js文件(创建好先放着不用动) 确定一下目前的目录是这个样子的


这个时候切换到命令行，还是在项目目录下运行 cnpm install --save-dev gulp 运行完这个命令到项目目录刷新一下是不是多了一个node_modules目录啊(哎呀好神奇啊)

现在已经完成了准备工作 ，不过还是确认下目前的目录结构是这样的


你的是和我的一样吗之后关于gulp的代码，都是写到gulpfile.js文件里博银财富

好了我们正式开始用写gulp部分的代码了，首先打开gulpfile.js 输入var gulp= require(‘gulp’); 这里是创建一个gulp对象，根据这个gulp对象开始操作的(不理解没关系)，必须有这一步

首先我们讲gulp的第一个api gulp.task(); 看代码

javascript 代码
效果预览

123456789101112131415161718192021222324252627282930313233//这里是gulpfile.js文件var gulp = require('gulp');//第一个API       gulp.task();gulp.task('default',['task1','task2'],function(){  //default是默认的的命令    console.log('我是difault默认命令');});gulp.task('task1',function(){    console.log("我是task1");});gulp.task('task2',['task3'],function(){    console.log("我是task2");});gulp.task('task3',function(){    console.log("我是task3");});/* gulp.task()这个里面放三个参数，第一个参数是命令的名称(随便起的) 例如：上面的task1，我们在命令行里输入gulp task1 就会打印出我是task1字符串                    当然我们可以给他命名为default，default是默认命令 ，在命令行中只输入gulp 后面不用跟命令名称自动 执行default命令 第二个参数是可选参数，类型是数组 表示当前命令依赖的哪些命令，看上面的代码defalut命令依赖 task1 和 task2 命令  第三个参数是执行的操作。(可以理解为命令的操作)  把上面的代码写好后，在命令行中输入 gulp 回车，会执行default命令，default命令会依赖 task1，和task2，命令 所以首先会执行task1命令，打印 "我是task1"， 然后执行task2命令，因为task2命令依赖task3命令所以会先执行task3，在执行task2. 这个时候才会执行到default命令 所以运行gulp 之后的打印顺序是 我是task1 我是task3 我是task2 我是default默认命令

然后我们讲第二个api gulp.src() 还是看代码吧，上面的代码不用删除 然后在增加以下代码javascript 代码效果预览

1234567gulp.task('copy',function(){    gulp.src('./src/**/*')//这里的**/*的意思是src下面的所有文件这样放到内存中类似input读取操作    .pipe(gulp.dest('./build/')) //pipe方法相当于下一步  gulp.dest()相当于输出 output;});/* 这个时候在命令行中输入gulp copy 执行copy命令，是把src下面的所有的东西复制输出到build目录中刷新一下看看是不是build里面的和src里面的现在一模一样了 * */

第三个api 是gulp.watch(); gulp.watch是监控文件变化的

javascript 代码
效果预览

123456789101112/* * 第三个API gulp.watch(); * gulp.watch 监控文件变化，第一个参数显而易见是需要监控的文件；第一个第二个参数是可选。文件变化后执行的命令。第三个参数是回调函数 *  */gulp.task('watchfile',function(){    gulp.watch('./src/index.html',['task1','task2'],function(){})})/* 在命令行中输入gulp watchfile 会发现命令行没有前面的地址了。说明。命令行正在运行。一直在监控src下面的index.html文件 当我们修改index.html文件里面的内容的时候。保存一下。在命令行中会自动执行gulp的 task1 和task2命令  对不对，是不是十分神奇 * */

好想gulp的api已经说完了，对的没错 确实是说完了吧，下面我开始说一说gulp操作中常用到的一些插件

第一个 gulp中提供了一个 可以将less文件编译成css文件的一个插件 gulp-less ，需要用npm安装，

切换到我们的命令行，输入 cnpm install --save-dev gulp-less 回车 安装完毕 打开package.json 文件里面的devDependencies 对象里面是不是多了一个gulp-less 这个对象

devDependencies这个对象里面就是本项目目录里面用到的插件。到这一步是不是已经有两个了 一个gulp 一个gulp-less，言回正传切回到我们的gulpfile.js

我们在src目录下在新建一个less文件夹。在less 文件夹下 新建一个style.less文件 style.less里写上你的less代码。在gulpfile.js中增加以下代码javascript 代码效果预览

12345678910var less = require('gulp-less'); //建立一个gulp-less的对象gulp.task('less',function(){    gulp.src('src/less/*.less') //选中less文件夹下的所有的.less文件        .pipe(less())//less()函数，使less文件编译成css文件 .pipe()就相当于下一步 之前好像已经说过了 习惯就好了        .pipe(gulp.dest('src/css/')) //用dest函数输出到css文件夹下})/* 在命令行中输入gulp less 命令 运行过后你发现是不是你的src下面的css文件里面多了一个css文件 是跟句less编译过来的。 * */

目前到这里是不是还是没什么难度的，讲完了less编译css下面在说一个css和js文件合并。用到的插件gulp-concat

首先先在项目目录中安装该插件 命令行中输入 cnpm install --save-dev gulp-concat (同样package.json文件里又多了一个gulp-concat插件)

我们在src/css 目录下新建两个.css文件分别写上一句css的代码(这个自己随便写了)，

然后在gulpfile.js中增加代码

html 代码
效果预览

12345678910var concat = require('gulp-concat');gulp.task('concat',function(){    gulp.src('./src/css/*.css') //选中css目录下的所有的css文件合并成all.css文件        .pipe(concat('all.css',{newLine:'//这里是分割线'}))//第二个参数newLine可选表示合并中间插入的内容        .pipe(gulp.dest('./src/css/'))})/*命令行中输入gulp concat 运行concat命令。之后会发现src中的css目录是不是多了一个all.css的文件里面的内容是两个css文件合并到一起的*/

讲完了css和js合并用的插件。在说一个css文件压缩的插件。gulp-clean-css

首先安装该插件，我相信不用说大家也已经回安装了。命令行中输入

cnpm install --save-dev gulp-clean-css 安装完成后在gulpfile.js文件里增加html 代码效果预览

12345678910111213141516/*css文件压缩 用到的插件是 gulp-clean-css * npm install --save-dev gulp-clean-css * 这里我们借用concat命令的合并css的行为，合并完后进行压缩 * cleanCss()函数里面的参数可选 下面注释是兼容ie8 里面的参数可以查看npm官网中的 gulp-clean-css插件 */var cleanCss = require('gulp-clean-css');gulp.task('clean',function(){    gulp.src('./src/css/*.css')         .pipe(concat('style.css'))        .pipe(cleanCss()) //.pipe(cleanCss({compatibility: 'ie8'}))        .pipe(gulp.dest('./src/css/'))})/* 命令行中输入gulp clean命令，运行完后发现style.css里面的代码是不是被压缩了 并且合并了别的所有的css文件的代码 * */

学到这是不是已经轻车熟路了，下面说一下js压缩用到的插件(js合并用的插件和css一样也是gulp-concat)

js压缩用到的插件是gulp-uglify 安装gulp-uglify插件 命令行中输入 cnpm install --save-dev gulp-gulify

在gulpfile.js文件中新增下面的代码

javascript 代码
效果预览

123456789101112/* js 合并用的插件和css合并用的一样都是concat * js 压缩用的插件是gulp-uglify * 安装命令是 * npm install --save-dev gulp-uglify */var uglify = require('gulp-uglify');gulp.task('js1',function(){    gulp.src('src/js/*.js') //这一步拿到src/js文件下 所有的.js文件        .pipe(concat('all.js'))//合并到一期在all.js文件        .pipe(uglify())  //压缩js代码        .pipe(gulp.dest('src/js/'))//最后输出到src/js文件中});

命令行中输入gulp js1 运行上面的js1 命令 后是不是js文件夹里面多了一个all.js文件 并且合并了所有的js文件

说完css js 文件的合并和压缩 现在该轮到 图片压缩了吧 在我们前端项目中会用到很多图片。当项目上线后，有些图片会特别大

导致加载的时候会很慢，图片压缩会解决一点这些问题，是图片的大小变的不是那么大 嗯用到的插件是 gulp-imagemin

首先安装gulp-imagemin插件。命令行输入什么命令。大声告诉我 对 就是 cnpm install --save-dev gulp-imagemin

废话不多说直接上代码javascript 代码效果预览

1234567891011var imagemin = require('gulp-imagemin');gulp.task('images',function(){    gulp.src('./src/img/*.*') //拿到img文件下的所有图片        .pipe(imagemin()) //进行图片压缩        .pipe(gulp.dest('./build/img/')) //压缩完后输出到build文件中的img文件里})/* * 当然首先在src/img/文件夹下放上几张图片 （格式最好是jpg，或者png的） 命令行中输入 gulp images 回车   命令运行完后对比一下build中的图片大小和 src中 的图片大小 是不是build中的比较小 * */

接下来是雪碧图(精灵图)，用到的插件是gulp-css-spriter

安装命令 同上， cnpm install --save-dev gulp-css-spriter 目前该插件只支持.jpg .png文件类型的图片

在src img 中放几张小点的图片。精灵图是把一些小的图片合并成一张图片。根据background-position 进行定位从而减少了

浏览器读取图片的次数。提高了效率大概就是这样

首先放几张小的图片在src/img 的文件夹里，然后在任意一个css文件里 background url 引入这些图片

这里是css中引入这些图片
接下来看代码吧

javascript 代码
效果预览

12345678910111213141516/*雪碧图(精灵图):用到的插件     gulp-css-spriter * 安装命令: npm install --save-dev gulp-css-spriter * 引入对象 * 目前该插件只支持 .jpg .png文件的图片 */var spriter = require('gulp-css-spriter');gulp.task('spriter',function(){    gulp.src('./src/css/*.css')           .pipe(concat('all.css'))  //这里做了一下css的合并操作。上面提到过的        .pipe(spriter({            'spriteSheet': './build/img/spritesheet.png', //生成的路径，这里是精灵图生成的路径 和名称。根据自己的项目自定义            'pathToSpriteSheetFromCSS': '../img/spritesheet.png'  //替换的路径  这里是把原来引入的背景图路径替换成这个        }))        .pipe(cleanCss()) //这里进行了压缩操作        .pipe(gulp.dest('./build/css/')) //最后输出到了build下面的css文件夹里});

在命令行中输入gulp spriter 执行精灵图命令。执行完毕后。会在build/下面的img文件下生成一个名为spritesheet.png的大图，并且all.css文件已经给我们自动定位好了

背景图，只要html 文件 引入build/下面的all.css文件就好了

说一下html 文件的压缩吧 html文件压缩用到的插件是 gulp-htmlmin

首先。对你没说错安装该插件 cnpm install --save-dev gulp-htmlmin

下面看代码吧