做一个合格的前端,gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考的网站),它前端js、css的压缩、合并、md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服。ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引、自定义富文本编辑器、图片上传压缩水印等等。

一、什么是gulp

gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。例如:css、js的合并与压缩(减少http请求,缩小文件大小)、html压缩、md5名生成与替换(一般解决浏览器缓存)、线上配置文件自动替换、搭建本地web服务器做到实时刷新等。

二、环境搭建

gulp是基于Node.js的插件工具

搭建Node.js环境:https://nodejs.org/en/download/ 下载相应系统的node安装包。进入终端:键入:node -v如果出现node版本号,则node.js安装成功。

安装gulp:

(1)、安装全局gulp:终端键入:npm install gulp -g 等待完成;

(2)、cd进入到项目根目录 -->:终端键入:npm init 【生成node.js插件管理json文件:package.json】:如图:

【注:如图红色箭头、一路enter即可(每一项的意义都很明确,无需解释!我只是提一下license选项,这一项是开源协议:通常的开源协议有:GPL、Apache License、 BSD、ISC.. 等等,有兴趣的可以参考:开源协议

(3)、键入:npm install gulp --save-dev 安装gulp到当前目录,等待安装完成。键入gulp-v 出现全局版本,和当前版本,安装完成。如图:

键入:gulp,出现:“No gulpfile fount”,说明前三步执行成功。

(4)、从上面提示可以看出,运行gulp需要gulpfile文件。故而:在当前文件夹新建文件:gulpfile.js备用。

三、gulpfile.js文件编写(重点)

在gulpfile.js中写入:

vargulp =require("gulp");//申明gulp变量gulp.task("start",function(){console.log("痞子猫**************");});

终端键入:gulp start 执行gulp中的start任务,出现打印,说明gulpfile.js编写没什么问题!如图:

下面开始进入正题,

压缩、合并等这些操作可以依靠gulp插件完成:插件安装命令:npm install [module] --save-dev ;

如:npm install gulp-concat --save-dev 这是安装合并插件。使用如下:

vargulp =require("gulp");//申明gulp变量varconcat =require('gulp-concat');// require:加载插件,参数为:插件名//合并任务gulp.task("concat",function(){//concat为任务名,运行gulp concat执行此任务。returngulp.src("./js/*.js")//需要合并的js目录,支持正则.pipe(concat("all.js"))//concat(),合并操作,参数:合并后的名字.pipe(gulp.dest("./js/"))//合并后放入的目录});

终端键入:gulp concat 执行此任务。

这就是一个简单的合并任务,前面提到了node是基于流,也就是管道操作的。gulp.src()管道的入口,pipe()获得处理管道中的数据,pipe(gulp.dest())处理后数据的出口。说别了就是一个流水线操作。

所有的gulp插件运用也就是这个套路了:常用插件集合:

1.gulp-sass(sass编译)

2.gulp-compass(sass编译)

3.gulp-autoprefixer(添加CSS3前缀)

4.gulp-clean-css(压缩CSS)

5.gulp-include(文件包含)

6.gulp-concat(文件合并)

7.del(文件删除)

8.gulp-uglify(压缩js)

9.gulp.spritesmith(合成雪碧图)

10.run-sequence(队列执行)

11.browser-sync(浏览器同步刷新)

12.gulp-babel(js编译)

13.gulp-imagemin(图片压缩)

gulp-imageisux(腾讯智图压缩,慎用)

imagemin-jpegtran(jpg图片压缩)

imagemin-pngquant(png图片压缩)

gulp-image-resize(图片大小调整)

14.gulp-rename(重命名)

15.gulp-live-server(轻量服务器)

16.gulp-livereload

17.gulp-util(工具集)

18.require-dir(引入整个文件夹文件)

19.connect-livereload(热更新同步)

20.gulp-if(是否运行插件)

21.gulp-plumber

22.gulp-eslint(eslint代码检查)

23.gulp-htmlmin(html压缩)

24.gulp-clean(删除文件/文件夹)

25.gulp-less

26.gulp-load-plugins(加载gulp插件)

再次强调安装插件命令:npm install [module] --save-dev

至于运用我觉得没啥可说的:就拿常见的举个例子吧:

del:描述:删除:

vardel =require('del');del('./dist');// 删除整个dist文件夹

gulp-rename:描述:重命名文件。

varrename= require("gulp-rename");    gulp.src('./hello.txt')    .pipe(rename('gb/goodbye.md'))// 直接修改文件名和路径  .pipe(gulp.dest('./dist'));      gulp.src('./hello.txt')    .pipe(rename({dirname:"text",// 路径名  basename:"goodbye",// 主文件名  prefix:"pre-",// 前缀  suffix:"-min",// 后缀  extname:".html"// 扩展名  }))    .pipe(gulp.dest('./dist'));

gulp-filter:描述:在虚拟文件流中过滤文件。

varfilter= require('gulp-filter');constf =filter(['**','!*/index.js']);  gulp.src('js/**/*.js')      .pipe(f)// 过滤掉index.js这个文件  .pipe(gulp.dest('dist'));constf1 =filter(['**','!*/index.js'], {restore:true});  gulp.src('js/**/*.js')      .pipe(f1)// 过滤掉index.js这个文件  .pipe(uglify())// 对其他文件进行压缩  .pipe(f1.restore)// 返回到未过滤执行的所有文件  .pipe(gulp.dest('dist'));// 再对所有文件操作,包括index.js 

gulp-uglify:描述:压缩js文件大小。

varuglify =require("gulp-uglify");    gulp.src('./hello.js')      .pipe(uglify())// 直接压缩hello.js  .pipe(gulp.dest('./dist'))        gulp.src('./hello.js')      .pipe(uglify({mangle:true,// 是否修改变量名,默认为 true  compress:true,// 是否完全压缩,默认为 true  preserveComments:'all'// 保留所有注释  }))      .pipe(gulp.dest('./dist'))

gulp-csso:描述:压缩优化css。

varcsso =require('gulp-csso');    gulp.src('./css/*.css')      .pipe(csso())      .pipe(gulp.dest('./dist/css'))

gulp-html-minify:描述:压缩HTML。

varhtmlminify =require('gulp-html-minify');    gulp.src('index.html')      .pipe(htmlminify())      .pipe(gulp.dest('./dist'))

gulp-imagemin:描述:压缩图片。

varimagemin =require('gulp-imagemin');    gulp.src('./img/*.{jpg,png,gif,ico}')      .pipe(imagemin())      .pipe(gulp.dest('./dist/img'))

gulp-autoprefixer:描述:自动为css添加浏览器前缀。

varautoprefixer = require('gulp-autoprefixer');    gulp.src('./css/*.css')      .pipe(autoprefixer())// 直接添加前缀  .pipe(gulp.dest('dist'))    gulp.src('./css/*.css')      .pipe(autoprefixer({          browsers: ['last 2 versions'],// 浏览器版本  cascade:true// 美化属性,默认true  add:true// 是否添加前缀,默认true  remove:true// 删除过时前缀,默认true  flexbox:true// 为flexbox属性添加前缀,默认true  }))      .pipe(gulp.dest('./dist'))

其实在列举没啥意思,都是一个套路,想了解那个插件的参数、使用方法等,直接上https://www.npmjs.com/ 上面查询吧!

注意事项:

src入口匹配说明:

app.js 精确匹配

*.js 能匹配js后缀的文件

*/.js 能匹配多级目录下的js文件(也包含当前目录下)

!js/app.js 精确排除

return说明

不加return返回,默认异步执行;加上return意思很明确,就是等待流处理结束~可做同步处理任务条件

默认任务说明

只要任务名字为default,当运行gulp时是可省略任务名执行,直接键入:gulp

任务依赖说明

gulp.task("task1",function(){//});gulp.task("task2",["task1"],function(){//});

如上代码:task2依赖于task1,也就是说等待task1任务结束后再执行

同步执行说明

gulp默认全部任务为异步执行,其实在实际场景很多需要同步操作:如:拷贝-压缩操作,必须拷贝完成才能压缩。

故而推荐一种简单的方法处理同步问题:使用插件:gulp-sequence

vargulp =require("gulp");//申明gulp变量vargulpSequence =require('gulp-sequence');//同步执行模块gulp.task("task1",function(){returnxxx//具体任务});gulp.task("task2",function(){returnxxx//具体任务});gulp.task("task3",function(){returnxxx//具体任务});//这样可保证,task1-》task2-》task3的执行顺序,任务必须return,已解释原因gulp.task("default",function(callback){gulpSequence("task1","task2","task3",            callback);});

啥?你不想看这么多!那也简单~

1、安装node 

2、执行 npm install gulp -g

3、复制下面代码到:package.json(新建)

{"name":"guandn","version":"1.0.0","description":"","main":"index.js","directories": {"lib":"lib"},"dependencies": {"gulp":"^3.9.1"},"devDependencies": {"del":"^3.0.0","gulp-concat":"^2.6.1","gulp-html-minify":"0.0.14","gulp-htmlmin":"^4.0.0","gulp-minify-css":"^1.2.4","gulp-rename":"^1.2.2","gulp-rev":"^8.1.1","gulp-rev-collector":"^1.2.4","gulp-sequence":"^1.0.0","gulp-smushit":"^1.2.0","gulp-uglify":"^3.0.0","gulp-useref":"^3.1.4","merge-stream":"^1.0.1"},"scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"repository": {"type":"git","url":"https://gitee.com/quzhuanpanDesigner/guandn.git"},"author":"broom","license":"ISC"}

4、执行:npm install 【根据package.json安装插件】

5、复制下面代码到:gulpfile.js(新建)

vargulp =require("gulp");//申明gulp变量vardel =require('del');//删除模块varfs =require("fs");//文件操作模块varconcat =require('gulp-concat');// 拼接工具varuglify =require('gulp-uglify');// 压缩js工具varminifyCss =require('gulp-minify-css');// 压缩css工具varminiHtml =require("gulp-html-minify");//压缩html/jspvarsmushit =require('gulp-smushit');//无损压缩jpg、png图片varrev =require('gulp-rev');// 加md5后缀的工具varrevCollector =require('gulp-rev-collector');//与rev共同使用varuseref =require('gulp-useref');// 替换文件中的链接的工具,一般与gulp-rev共同使用vargulpSequence =require('gulp-sequence');//同步执行模块varmergeStream =require("merge-stream");//合并多个stream//资源配置varconfig={dist:"./dist/guandn/",//目标目录target:'./target/guandn/',//资源}//MD5地图json地址varrevJsonConfig = {js:'./rev/rev-manifest-js.json',css:'./rev/rev-manifest-css.json',base:'./rev/'}//js压缩参数varuglifyConfig = {mangle:false,//类型:Boolean 默认:true 是否修改变量名compress:true,//类型:Boolean 默认:true 是否完全压缩}varUtil = {fetchScripts:function(readFile, basePath){//文件操作工具,取得需要合并的jsvarsources = fs.readFileSync(readFile);            sources =/\[([^\]]+\.js'[^\]]+)\]/.exec(sources);            sources = sources[1].replace(/\/\/.*\n/g,'\n').replace(/'|"|\n|\t|\s/g,'');            sources = sources.split(",");console.log("搜索js合并地址:读取文件: "+readFile);            sources.forEach(function(filepath, index){                sources[ index ] = basePath + filepath;console.log("地址:"+ basePath + filepath);            });returnsources;        },fetchStyles:function(readFile, basePath){//文件操作工具,取得需要合并的cssvarsources = fs.readFileSync(readFile),                filepath =null,                pattern =/@import\s+([^;]+)*;/g,                src = [];console.log("搜索css合并地址:读取文件: "+readFile);while(filepath = pattern.exec(sources)) {                src.push(basePath + filepath[1].replace(/'|"/g,""));console.log("地址:"+ basePath + filepath[1].replace(/'|"/g,""));            }returnsrc;        }    };gulp.task("copy",function(){console.log("拷贝代码到dist************************")returngulp.src(config.target+"/**/*").                pipe(gulp.dest(config.dist));});gulp.task("del",function(){console.log("删除dist、rev目录************************")returndel([config.dist,revJsonConfig.base]);});//合并任务gulp.task("combine",function(){console.log("合并任务开始************************")varcommonJs = Util.fetchScripts(config.dist+"media/common.app.js", config.dist+"media/");varcommJsStream =  gulp.src(commonJs)        .pipe(concat("common.app.js"))        .pipe(uglify())//压缩.pipe(rev())//加名字MD5.pipe(gulp.dest(config.dist+"media/"))//保存.pipe(rev.manifest({//生成MD5地图path: revJsonConfig.js,merge:true}))        .pipe(gulp.dest("./"));varcommonCss = Util.fetchStyles(config.dist +"media/common.app.css", config.dist +"media/");varcommCssStream = gulp.src(commonCss)        .pipe(concat("common.app.css"))        .pipe(minifyCss())        .pipe(rev())        .pipe(gulp.dest(config.dist+"media/"))        .pipe(rev.manifest({path: revJsonConfig.css,merge:true}))        .pipe(gulp.dest("./"));varpluginsJs = Util.fetchScripts(config.dist+"media/plugins/plugin.common.app.js", config.dist+"media/plugins/");varpluginJsStream = gulp.src(pluginsJs)        .pipe(concat("plugin.common.app.js"))        .pipe(uglify())//.pipe($.rev()).pipe(gulp.dest(config.dist+"media/plugins/"))//.pipe($.rev.manifest({//    path: revJsonConfig.js,//    merge: true//})) //.pipe(gulp.dest("./"));varpluginCss = Util.fetchStyles(config.dist +"media/plugins/plugin.common.app.css", config.dist+"media/plugins/");varpluginCssStream = gulp.src(pluginCss)        .pipe(concat("plugin.common.app.css"))        .pipe(minifyCss())//.pipe($.rev()).pipe(gulp.dest(config.dist+"media/plugins/"))//.pipe($.rev.manifest({//    path: revJsonConfig.css,//    merge: true//})) //.pipe(gulp.dest("./"));//合并编辑器varguandnEditor = Util.fetchScripts(config.dist+"media/plugins/guandnEditor/editor.commbine.min.js", config.dist+"media/plugins/");vareditor = gulp.src(guandnEditor)        .pipe(concat("editor.commbine.min.js"))        .pipe(uglify())        .pipe(rev())        .pipe(gulp.dest(config.dist+"media/plugins/guandnEditor/"))        .pipe(rev.manifest({path: revJsonConfig.js,merge:true}))        .pipe(gulp.dest("./"));//合并上传插件varguanzhi = Util.fetchScripts(config.dist+"media/plugins/jQuery-File-Upload-master/js/jquery.fileuplaod.all.min.js", config.dist+"media/plugins/")varguanzhiFileUulpad = gulp.src(guanzhi)            .pipe(concat("jquery.fileuplaod.all.min.js"))            .pipe(uglify(uglifyConfig))            .pipe(gulp.dest(config.dist+"media/plugins/jQuery-File-Upload-master/js/"))returnmergeStream(commJsStream,commCssStream,pluginJsStream,pluginCssStream,editor,guanzhiFileUulpad);});//压缩js,cssgulp.task("compress",function(callback){console.log("压缩任务开始***************************")varcompressCss = gulp.src([config.dist+"media/**/*.css","!**/*.min.css","!**/plugins/**/*"])        .pipe(minifyCss())        .pipe(gulp.dest(config.dist+"media/"));varcompressJs = gulp.src([config.dist+"media/**/*.js","!**/*.min.js","!**/plugins/**/*"])        .pipe(uglify(uglifyConfig))        .pipe(gulp.dest(config.dist+"media/"));returnmergeStream(compressCss, compressJs);});//静态文件替换gulp.task("replaceJC",function(){console.log("替换静态文件**************************");varrevJson = revJsonConfig.base+"**/*.json";varcommonCss = gulp.src([revJson, config.dist+"media/css/common/*.jsp"])          .pipe(revCollector({replaceReved:true}))        .pipe(gulp.dest(config.dist+"media/css/common/"));varcommonJs = gulp.src([revJson, config.dist+"media/js/common/*.jsp"])          .pipe(revCollector({replaceReved:true}))        .pipe(gulp.dest(config.dist+"media/js/common/"));vareditor = gulp.src([revJson, config.dist+"WEB-INF/pages/**/*.jsp"])      .pipe(revCollector({replaceReved:true}))    .pipe(gulp.dest(config.dist+"WEB-INF/pages/"));returnmergeStream(commonCss, commonJs);});//可异步执行操作【最后操作】gulp.task("asyn",function(){console.log("压缩jsp、拷贝配置**********************************")//    gulp.src(config.dist+"WEB-INF/pages/**/*.jsp")//        .pipe(miniHtml({//            empty: true  //删除空格//        }))//        .pipe(gulp.dest(config.dist + "WEB-INF/pages/"));//图片压缩(费时操作)//    gulp.src(config.dist+'media/img/**/*')//        .pipe(smushit({//            verbose: true//        }))//        .pipe(gulp.dest(config.dist+'media/img/'));});gulp.task("finishedDel",function(){returndel([revJsonConfig.base]);});gulp.task("default",function(callback){    gulpSequence("del","copy","combine","compress","replaceJC","finishedDel","asyn",            callback);});

6、修改gulpfile中的路径,文件等.

至此gulp的基本使用已经没啥问题了!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容