建立我的第一个Gulp项目

文/anMoo韩魔

图片来源网络

Gulp基于Node.js的自动化构建工具
Gulp运行效率比Grunt高,相比之下更有设计感

新建项目

在新建项目之前,电脑中需要安装全局的gulp插件,然后就可以在指定的项目文件中新建gulp项目了。

npm install -g gulp-cli
  1. 文件夹下-打开终端
npm init - 输入项目名称等信息

(页面中所有引入的jscss都是引用dest文件夹下的压缩文件。)

  1. 处理CSS
npm install -? (查看group install的命令)

安装css预处理的五个插件:gulpgulp-sassgulp-concatgulp-minify-cssgulp-sourcemaps)

npm install --save-dev gulp gulp-sass gulp-concat gulp-minify-css gulp-sourcemaps

如果需要查看项目安装的所有插件,可以在package.json中的devDependencies中看到。
这需要安装插件的时候使用save-dev命令。
本项目中目前为止安装的插件如下:

安装的插件

  1. 安装全局gulp插件
npm install -g gulp-cli

安装一个公用指令

  1. 项目根目录下新建gulpfile.js文件
    在gulpfile.js文件中需要引用所有的插件,然后根据需要执行的操作新建任务。
    现在需要压缩所有.scss文件,代码如下:
    压缩.scss文件

    然后在命令行执行 gulp style,就可以看到所有文件已经转移到了dest文件夹下:
    文件转移

    说明我们的项目是完全可以执行的。
    然而我们需要的肯定不是单纯的文件转移,我们需要对样式文件进行编译。
    项目目录结构举例:
    项目目录结构
gulp.src(files[,options])
files: String Array, 必填,需要处理的文件匹配符路径
options: Object,选填,配置选项
base: String,输出路径的基底位置
buffer: Booleab,设置gulp是否缓存文件,在处理大文件时可提高效率
read: Boolean,是否执行文件读取操作

通过对sass插件的引用var sass = require('gulp-sass')来对样式进行编译:

sass插件

经过实验,在.pipe(sass())后面不能使用分号,不然程序会报错。
编译成功后,就可以在dest文件夹下看到编译后的样式文件了,这里可以使用sass的语法来验证编译是否成功。
同时,我们可以使用css-minify插件来格式化样式

var cssminify = require('gulp-minify-css')

cssminify

系统会自动将css格式化,并将相同样式的选择器合并,例如:.index,.select{color:red}

  1. 链接JS
    因为连接起来的js会有命名空间的混淆,所以这里要用到闭包。
    通过自定义插件的方式来做一个匿名函数的包裹:
    through2.obj.bufferContents 每个文件处理时调用
    through2.obj.endStream 所有文件都处理完后来调用
    插件

    首先安装through2插件
npm install --save-dev through2

通过定义bufferContentsendStream,在任务中调用through.obj方法

调用

执行gulp script,得到合并在一起的JS文件,并且每个JS的内容都被包含在自己的作用域中。
闭包

要使合并后的JS有效,还需要编写registJS函数。(编写的registJS函数属于自定义插件功能,也可以通过gulp自带的插件gulp-insert来完成以上功能,这在后面会有提及)
registJS的内容如下:
registJS

当然,通过插件gulp-insert可以直接完成闭包和registJS的功能。
步骤一样是先安装插件 npm install --save-dev gulp-insert
在代码中引用插件:var insert = require('gulp-insert')
然后改写上面的代码:
更改以后

gulp-insert使用stream类来才做文件对象,比之前自定义的时候用buffer更好。

  1. 压缩js
    安装gulp-uplifynpm install --save-dev gulp-uglify
    引用插件:var uglify = require('gulp-uglify')
    调用插件:.pipe(uglify())
    gulp-uglify是在生产环境下的压缩。
    如果要在开发环境下压缩的话,需要使用另外一个插件 browser-sync
    安装插件:npm install --save-dev browser-sync
    引用插件:var browserSync = require('browser-sync').create();
    为了举例,我们新建一个开发环境下的任务default:dev:
gulp.task('default:dev',['script:dev','style:dev'],function(){
    browserSync.init({
        server:{
            baseDir:'./'  //新建一个server
        },
        open:false  //防止代码运行时,浏览器自动打开一个页面
    })
})

但是这时候的cssjs都是已经压缩的,需要安装插件gulp-sourcemaps
安装插件:npm install --save-dev gulp-sourcemaps
复制原先的stylescript任务,把人物名称分别改为:style:devscript:dev,同时把default:dev的依赖也改成对应的名字['script:dev','style:dev']
style:dev如下:

style:dev

*注意:在:dev环境下不能使用cssminify()
script:dev如下:
script:dev

运行default:dev任务后就会在控制台source页面看到没有压缩的cssjs供开发人员调试。
后期研究:unit test 框架核心功能的单独调试

  1. Watch功能
    default:dev任务中添加两行watch的代码:
    gulp.watch('scriptPath',['script:dev']); //scriptPath在本项目中为:./script/**/*.js,[ ]中的是需要执行的任务名称,中括号不能删除
    gulp.watch('stylePath',['style:dev']); //stylePath在本项目中为:./style/**/*.scss,[ ]中的是需要执行的任务名称,中括号不能删除

同时在script:devstyle:dev两个任务中添加一行代码:

.pipe(browserSync.stream()); //同步浏览器

完成后在命令行启动任务default:dev:

gulp default:dev

这时,在样式文件中修改的内容一旦保存可以直接在显示器显示渲染效果,无需刷新浏览器,这就是watch的功能。

注:以上所有内容都是本人的学习笔记和总结,仅供学习和参考,如果有遗漏或者不当的地方请谅解,请勿转载。

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

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,147评论 7 55
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,289评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 921评论 0 3
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 527评论 0 0
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,428评论 1 32