gulp学习笔记

1、1、gulp.jsgulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动完成一些常见的重复性的操作。在实际项目开发过程中我们经常会有一些重复性的操作，这些操作会让我们的开发效率有所降低，gulp就是去解决这些问题的。gulp的机制：gulp的机制就是将重复工作抽象成一个一个的任务A、常见的重复性操作：1 ）、less-css2）、sass-css3）、css压缩4）、js混淆5）、HTML 压缩6）、图片质量压缩7）、OOOOOO。B、gulp的链接1）、官网:2） 、中文网：.c n2、gulp的安装gulp的安装可以参考 gulp中文网。1）、全局安装gulpnpm in

2、 stall -global gulp安装完成后可使用：gulp -v命令来查看gulp的版本2）、将gulp安装到项目本地gulp只是我们在开发阶段所依赖的一个工具，并不是我们项目所依赖的一些类库 或工具，所以我们将gulp放在开发的依赖里面a） 、在项目中初始化npm （即生成package.json 文件）在自己的项目跟目录中输入命令：npm in itb）、在项目中安装 gulpnpm in stall gulp -save-dev 安装完成过后就可以在package.json 文件中的” devDependencies”看到gulp 了。3） 、在项目中创建 gulp的主文件（即创建

3、gulpfile.js ）在自己的项目跟目录中新建一个gulpfile.js 文件，这个文件就是 gulp的主文件，它是用来注册任务的。在 gulpfile.js文件中注册自己的任务：/载入gulp模块var gulp = require（gulp ”）；/*注册一个任务。参数一：任务名称参数二：当gulp执行sayHello 任务时会自动执行该函数*/gulp.task( sayHello ” ,function ()con sole .log(hello word!”)；);在命令行里执行任务：gulp sayHello3、gulp 常用 api3.1、gulp 常用 api 之：gulp

4、.srcgulp.src()可以用来获取一个文件的文件流。如：复制一个文件gulp.task(copy, function ()/*gulp.src()可以用来获取一个文件的文件流，它需要传入一个参数，该参数就是文件的路径。注意传入的路径是相对于当前gulpfile.js的路径。pipe()表示一个管道，当文件流进入该管道时需要进行怎样的操作，那么我们就可以把操作该文件流的步骤放入到该管道中，一个文件流可以流入多个管道。dest()表示目的地，它可以用来将文件流输出到指定的目录中，它需要传入一个参数，该参数就是文件流需要保存的目的地路径。注意这里不需要写文件名，它会自动按原来的文件名保存。*/

5、i gulp.src(src/i ndex.html).pipe(gulp.dest(dist/);理解pipe管道:globs匹配语法可参考： tes/15571/bf24d91f9d3d470b4104d89afad4e63f.html3.2、gulp 常用命令之：gulp.watch()gulp.watch()可以用来监视文件，并且可以在文件发生改变时做一些事情。gulp.task(copy, function ()gulp.src(src/i ndex.html). pipe(gulp.dest(dist/););gulp.task(dest, fun ctio n ()/*gulp.

6、watch()可以用来监视一个文件。它需要传入两个参数。参数一：需要监视的文件的路径参数二：参数二必须是一个glob字符串或glob字符串的数组。其实参数二就是当文件发生变化时需要执行的任务的名称*/gulp.watch(src/i ndex.html, copy););4、gulp插件开发gulp本身是一个轻量级的东西，它本身没有很多的功能，它的很多的功能都是来自于插件。我们想使用gulp的插件就必须到gulp官网的插件中去找。gulp插件地址：或 使用gulp插件：在官网找到自己想要的插件后，根据插件的文档来使用即可。案例：gulp-css nano的使用，css nano 可以用来压缩

7、css文件1) 、在项目中安装 css nano : npm in stall gulp-css nano -save-dev2) 、在gulpfile.js中注册任务var gulp = require(gulp);/ 载入 css nanovar cssnano = require(gulp-css nano ”)；:gulp.task( nan o, function ()/ 使用 cssnanogulp.src(src/css/i ndex.css).pipe(css nano()j.pipe(gulp.dest(dist/););gulp.task(dest2, fun ctio n

8、 ()gulp.watch(src/css/i ndex.css, nano);)4.1、常用gulp插件1) 、合并文件(gulp-coneat )https:/www. on eat2) 、js 压缩(gulp-uglify )https:/www. 3) 、css 压缩(gulp-css nano)https:/www .n nano4) 、压缩 HTML文件(gulp-html-minify)https:/www. nify5) 、压缩图片(gulp-imagemin)https:/www. 4.2、browsersync 插件browsersync的作用是实时、快速响应HTML、cs

9、s、js、sass、less 等文件并自动刷新页面，并且它还能在pc、平板、手机等设备下进行调试。 假如我们的桌子上有pc、iPad、iPho ne、An droid 等设备，同时打开了需要调试的页面，当使用了browsersy nc 后，我们只需要保存一下代码，以上的设备都会同时显示我们所做的改动，这样一来给我们节省了很多的时间，我们的开发效率也提升了许多。browsers yncbrowsers ync官网：https:/browsers yn c.io/ 中文网： http:/www.browsers yn 4.2.1、安装 browsersync如果我们的项目是使用 gulp来开发的，

10、那么我们只需要引入browsersync 模块即可。在项目中安装 browsers ync : npm in stall browser-s ync -save-dev使用 browsersync:var browsers ync = require(browser-s yn c).create();gulp.task(browser-server, function ()|/启动一个静态服务器|browsers yn c.i nit(server: ! /*baseDir表示启动的静态服务器的根目录，默认以 gulpfile.js 所在目录一致*/!baseDir: ./II I););42

11、2、browsersync自动刷新浏览器在实际项目开发中，我们非常希望我修改了文件一保存过后浏览器就自动刷新了。 browsers ync就可以做到这点，具体实现如下：var gulp = require(gulp);var cssnano = require(gulp-cssnano”)；/ 压缩 cssvar htmlminify = require(gulp-html-minify);/ 压缩 HTMLvar browserS ync = require(browser-s yn c).create();/*压缩css任务*/gulp.task(style, function ()gul

12、p.src(src/css/i ndex.css).pipe(css nano().pipe(gulp.dest(dist/)/如果当前执行任务后需要浏览器刷新，则再加一个管道执行刷新即可 .pipe(browserS yn c.reload(stream: true););/*压缩HTML任务*/ gulp.task(html minify, function ()gulp.src(./i ndex.html) .pipe(htmlmi ni fy() .pipe(gulp.dest(./) .pipe(browserS yn c.reload(stream: true););/*开启静态服

13、务器*/gulp.task(browserService, function ()browserS yn c.i nit( server: baseDir: ./);/在开启静态服务器后立即监听HTML、css、js、image等文件的改变gulp.watch(src/css/*.css, style);gulp.watch(index.html, htmlminify););5、gulp静态资源防止缓存解决方法每次修改了文件，客户端缓存cssjs 我们需要在引用的路径上加上添加版本号或者使用md5命名文件再修改 html里的引用。例如:那么使用gulp-rev-collector是一个不错的

14、选择工具，配置简单。注意：Gulp在保存UTF-8文件是采用无BOM如果页面或js、css中有中文则会导 致乱码，如果出现乱码，则使用gulp-bom 插件。参考地址：http:/www.bubuko.eom/i nfodetail-2151734.htmlgulp-rev-collector原理：1、修改js和css文件2、通过对js,css 文件内容进行hash运算，生成一个文件的唯一 hash字符串(如果文件修改则hash号会发生变化)3、 替换html中的js,css文件名，生成一个带版本号的文件名var gulp = require(gulp),/清空文件夹clea n = requ

15、ire(gulp-clea n),/文件重命名ren ame = require(gulp-re name),/更改版本号rev = require(gulp-rev),/ Gulp 在保存UTF-8文件是采用无BOM bom = require(gulp-bom),/执行顺序，避免run Seque nee = require(r un-seque nee),/ gulp-rev 的插件，用于html模板更改引用路径 revCollector = require(gulp-rev-collector);/*rc的第二个参数的read:false，是css输出到dist文件夹里。json表示出

16、来，这样通过 hash来精确1 、首先要清空里面曾经的资源，防止有冗余。 不读取文件加快程序*/ gulp.task(clea n, fun cti on ()retur n gulp.src(dist, read: false) .pipe(clea n();)；/*、添加版本号，并将经过优化和版本控制的 最后再用rev.manifest，将对应的版本号用定位到html模板中需要更改的部分。*/gulp.task(css, function ()一 _return . guj_p.src(css/fr.ont_sk/*/*.css)._Ipipe(rev().pipe(gulp.dest(d

17、ist/css).pipe(rev.ma ni fest()/这步是保存生成的rev-ma nifest.jso n文件);/*3.pipe(gulp.dest(dist/rev/css);、改变引用路径，这里我们将这个任务命名为rev。记得rev任务要在生成 main fest i之后进行，可以用 gulp任务依赖来进行流程控制。src引入一个数组，前一个是引入刚才生成的jso n文件，后一个是需要更改的html模板(jsp、php、的 cshtml 都可以的)i 然后replaceReved: true就可以成功替换了。最后将替换过的文件输出即可，这里i我输出到了原来引入的路径，这样就可以

18、成功替换了。*/gulp.task(rev, function ()return gulp.src(dist/rev/*/*.json, front_desk/*/*.html).pipe(revCollector(replaceReved: true).pipe(gulp.dest(fr on t_desk/);)； / 给cshtml转码任务gulp.task(cshtmlBom, function ()j return gulp.src(././views/Home/l ndex.cshtml)j.pipe(bom() /一定要在输出前引入该包ji);/*! 4.pipe(gulp.de

19、st(././views/Home);、定义一个汇总任务|*/iigulp.task(default, function ()/ 如果会出现乱码则加上/ run Seque nce(cshtmlBom);run Seque nce(clea n,iicss,rev););最终效果：r M csi charth consumer* frcntdesk/* advertisement-detalcss/* adve*ii5emet-lirt businesi-guide.亡/ se-detaihbC5fi/+ orgarbicathcn-introdu ce. ad maeiTint-deta -

20、8(2aGc22kC.eisAt ack eirtisemcnt-l iit-aB22Sa47aS,c55如 bakUg-glo-b t-5c?c-44211t.c55/* bu s i ne ss-u ide-2b 8c&ff 8 ee. css/t+ ea d taiils*78dd2e.c旳 organization-introduce-752a3&a35.cs f specialist-detsi -faftfceOl&css B revt as+ rev-man iestj s onhref= 八北ss/fTOrit_desfc/bacJcstage-g-beic44211ec3i type=teKt/cssM rel-wstylesheet /