相信大家一定听说过gulp或者webpack，grunt等前端构建工具，这些是做什么用的我也不知道，也许他们会和一些前端框架用到一起，让开发起来更方便吧。比如说vue框架脚手架里用到了webpack。。。好像跑题了 。
言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了不要喷我啊。毕竟我也是一个菜鸟。写下这篇笔记的，不是为了证明什么。就是方便我以后忘了时候回顾看一下。好，废话不多说 下面开始了
虽然是菜鸟级别的教程。 但是最起码读者你应该 html css 和 js jquery吧。你要是这个都不知道，那我真的帮不到你了。 好像又说废话了， 好 下面这你的要开始了
工欲善其事必先利其器 安装好我们需要的工具
1首先要安装node.js 这个就不用教了吧，我相信大家都已经安装过了，百度node进入官网，安装的时候 一路下一步。和安装QQ一样。
2我们要有自己的命令行工具，window死 系统的用户推荐使用 gitbash 或者github 自带的命令行工具。 本菜鸟用的就是github 命令行工具(其实这都无所谓)
3自己的编辑器，
101854z6hpjjz6xewce47h.png
(前面加个a能让他排到编辑器项目的最上面我点的方便，所以不要纠结啊)
src目录是我们开发的目录就是里面放你css文件，js文件，图片和html文件，build目录是gulp处理之后存放的目录，将来我们就是拿build目录里面的东西放到服务器上的
101217qnj6va2azbavbda0.png
命令行进入项目目录(是和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初始化一个目录吧，只要记住就好了) 初始化完是这个样子的!
103422jvag9h80poa85prd.png
初始化完成之后你会发现你的项目目录里多了一个package.json文件这个文件是npm的配置文件(一般不用管他)
package.json文件出来后，我们在他的同级目录，(也就是项目目录) 自己新建一个gulpfile.js 的js文件(创建好先放着不用动) 确定一下目前的目录是这个样子的
104322zndn19ah99azzbz9.png
这个时候切换到命令行，还是在项目目录下运行 cnpm install --save-dev gulp 运行完这个命令到项目目录刷新一下是不是多了一个node_modules目录啊(哎呀好神奇啊)
现在已经完成了准备工作 ，不过还是确认下目前的目录结构是这样的
105124ejaplekc47esk57l.png
你的是和我的一样吗之后关于gulp的代码，都是写到gulpfile.js文件里
好了我们正式开始用写gulp部分的代码了，首先打开gulpfile.js 输入var gulp= require(‘gulp’); 这里是创建一个gulp对象，根据这个gulp对象开始操作的(不理解没关系)，必须有这一步
首先我们讲gulp的第一个api gulp.task(); 看代码
//这里是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() 还是看代码吧，上面的代码不用删除 然后在增加以下代码
gulp.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是监控文件变化的
/*
* 第三个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中增加以下代码
var 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中增加代码
var 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文件里增加
/*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文件中新增下面的代码
/* 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
废话不多说直接上代码
var 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 进行定位从而减少了
浏览器读取图片的次数。提高了效率大概就是这样
153615gjowq0fbxfzffjof.png
这里是css中引入这些图片 接下来看代码吧
/*雪碧图(精灵图):用到的插件 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
下面看代码吧
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',function(){
gulp.src('./src/*.html')
.pipe(htmlmin({collapseWhitespace: true})) //进行压缩处理
.pipe(gulp.dest('./build/'))
});
/*
命令行中输入gulp htmlmin命令。 执行完后会把src下面的所有的html代码进行压缩。并且输出到了build文件夹下
htmlmin()函数里面的参数是什么意思呢 我也不知道。可以去npm上面查看 里面的参数代表的含义
* */
请叫我羊羊 发布于 2017-07-27 16:03:03 浏览：2392 类型：原创 - 教程 分类：性能优化 - node.js
网友评论