《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置
运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:
npm install gulp-cli –g
然后,在项目根目录下创建package.json文件,命令如下:
npm init
根据引导配置项目信息。然后安装Gulp依赖包,命令如下:
npm install gulp –save-dev
在项目根目录下,创建gulpfile.js文件,内容如下:
var gulp = require("gulp"); gulp.task("default", function(){ // 定义名称为“default”的任务 console.log("thisis default task"); // 此处定义default任务处理过程。 });
和Grunt相似,Gulp将构建过程拆解为一个个独立的子任务,使用gulp.task方法定义任务。通过命令提示符进入到项目目录,用“gulp 任务名”执行任务,实例命令如下:
gulp default
提示:对于默认(default)任务,可以省去任务名。
在创建任务的时候,和Grunt相似,可以指定任务的依赖项,代码如下:
gulp.task(“main”, [“deps1”, “deps2”, …],function(){ // 相关执行 });
gulp.task方法的第二个参数(数组)为“main”任务的依赖项。
项目中通常根据需求将构建过程拆解为多个小任务。下面介绍如何具体定义。
首先,指定需要构建的内容,并通过Gulp插件来完成构建,最终输出到指定的目录。
采用gulp.src方法指定文件源,代码如下:
gulp.src(“src/**/*.js”);:
// 或者 对于多个目录下的源,可以采用数组
gulp.src([“src/**/*.js”, “theme/**/*.scss”]);
gulp.src方法返回Stream对象,可以通过pipe方法将内容传递给插件。所有插件都接受pipe传递过来的数据,处理数据允许链式调用,代码如下:
gulp.src(“src/**/*.js”).pipe(plugin1()).pipe(plugin2())…
构建完毕后,需要采用gulp.dest方法将数据保存到文件中,代码如下:
gulp.src(“src/**/*.js”).pipe(gulp.dest(“dist”)); // 读取src下的所有js,写入到dist目录下
Gulp的每次操作都返回流对象,所有操作在内存中进行,不需要操作磁盘,从而大幅提高了构建速度。
8.3.2 预处理任务
上一节中,介绍了Gulp的安装,配置,以及Grunt任务的定义和执行。本节将介绍编译ECMAScript 6、Sass和CSS Sprite任务。
“gulp-babel”插件可以将ECMAScript 6编译为ECMAScript 5。以便运行在不支持ECMAScript 6的浏览器上。首先安装该插件,命令如下:
npm install gulp-babel –save-dev npm install babel-preset-es2015 --save-dev
然后,在gulpfile.js文件中创建任务,代码如下:
var babel = require("gulp-babel"); // 引入babel gulp.task("compile-js", function(){ gulp.src("src/**/*.js") // 处理src下的所有js脚本 .pipe(babel({ // 调用babel presets:['es2015'] // 采用es2015预设插件,将脚本编译为ECMAScript 5 })) pipe(gulp.dest("dist/js")); // 编译好的内容保存到dist目录下的js目录 });
Babel可以将JavaScript文件,甚至React的JSX文件编译为标准的JavaScript文件。Babel官方提供的预设插件(presets)让用户能够更简单地使用Babel。presets是针对特定编译条件预设的一组插件集合。如本实例中,采用的es2015预设插件包含插件有“check-es2015-constants”,“transform-es2015-arrow-functions”等。
注意:Babel只是做了语法层次的转换,并不会增加API的支持。对于class关键字定义的类,Babel会将其转化为通过prototype定义的对象。而对于ECMAScript 6的Promise对象,Babel不会做任何处理,因此需要通过polyfill来对浏览器不支持的API进行扩展。如“es6-promise”使得浏览器支持Promise对象。
在实际的项目中,可以在根目录下创建的“.babelrc”文件中配置Babel,代码如下:
{ "presets":["es2015"] }
编译Sass文件可以采用gulp-sass插件,安装命令如下:
npm install gulp-sass –save-dev
然后,在gulpfile.js文件中,增加任务执行Sass编译,代码如下:
var sass = require("gulp-sass"); // 引入sass插件 gulp.task("compile-sass", function(){ // 定义编译sass的任务 gulp.src("theme/**/*.scss") // 处理theme下的所有的sass文件 .pipe(sass().on('error',sass.logError)) // 采用sass插件编译,并处理错误 .pipe(gulp.dest("dist/css")); // 编译好的内容输出到dist目录下的css目录 });
在项目中,为了优化加载性能,需要将小图片合成一张大图,也就是所谓的“CSS Sprites”。该功能使用gulp.spritesmith插件来实现,安装命令如下:
npm install gulp.spritesmith –save-dev
然后在gulpfile.js文件中建立任务,代码如下:
var spritesmith = require('gulp.spritesmith'); // 引入sprite插件 gulp.task("sprite", function () { // 定义任务 gulp.src("theme/images/**.png") // 处理theme目录下的png文件 .pipe(spritesmith({ // 调用插件合并图片 imgName:'sprite.png', // 输出合成的图片名称 cssName:'sprite.css' //输出对应的css文件 })) .pipe(gulp.dest("dist")); // 输出到dist目录 });
本节介绍了三个预处理工具,有gulp-babel,gulp-sass和gulp.spritesmith。
更多信息关注:
《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用的更多相关文章
- 就来推荐一本2018年研究的Web书《移动Web前端高效开发实战》
一线互联网公司Web前端团队实战经验总结,涵盖移动Web前端开发各个关键技术环节,包括移动开发核心技术.常用布局方案.MV*类新时代框架.预编译技术.性能优化.开发调试.混合式应用.单元测试.工程化等
- 《移动Web前端高效开发实战》笔记4--打造单页应用SPA
路由是一个单页应用的核心,大部分前端框架都实现了一个复杂的路由库,包括动态路由,路由钩子,组件生命周期甚至服务器端渲染等复杂的功能.但是对于前端开发者而言,路由组件的核心是URL路径到函数的映射,了解 ...
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
1.整体缩放 整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大小.开发者可以用320像素的宽度作为基础宽度(高度可以固定),然后通过计算 ...
- 《移动Web前端高效开发实战》笔记3--代码检查任务
在项目的开发过程中,统一的代码风格对于项目的可协作性以及可维护性来说相当重要,因此可以采用一些插件来进行代码风格的检查. 本例中的源文件包含两类:Sass文件和采用ECMAScript 6规范的Jav ...
- 《Python高效开发实战》实战演练——内置Web服务器4
<Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图 ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...
- web前端学习之旅笔记01--HTML
web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...
- 《Python高效开发实战》实战演练——基本视图3
在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...
- 《Python高效开发实战》实战演练——建立应用2
为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...
随机推荐
- hdu3037Saving Beans——卢卡斯定理
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3037 卢卡斯定理模板——大组合数的取模 代码如下: #include<iostream> #i ...
- vijos:P1190繁忙的都市
描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条道路 ...
- printf函数指向串口的方法
简单地说:想在mdk 中用printf,需要同时重定义fputc函数和避免使用semihosting(半主机模式),标准库函数的默认输出设备是显示器,要实现在串口或LCD输出,必须重定义标准库函数里调 ...
- 转载:数据库应用开发工具Toad使用笔记
由于网上TOAD中文教程很少,在网上摘抄了此文章便于学习,感谢原创者. TOAD使用笔记 1.把鼠标停在sql所在行,然后ctrl+Enter直接执行当前sql. 2.解决Toad对中文显示乱码问题( ...
- 用expressjs写RESTful API
http://blog.csdn.net/kiwi_coder/article/details/36424671 用expressjs写RESTful API http://blog.csdn ...
- ARP欺骗(完全版)
在讲ARP欺骗之前先讲讲什么是ARP以及ARP欺骗的原理吧. 一. 什么是ARP? arp英文全称: address resolution protocol 中文:地址解析协议 它的作用:是根 ...
- 2019年第十届蓝桥杯国赛总结(JavaA组)
JavaA组国二,可以报销了~ JA死亡之组可不是盖的,rank12的排名还是拿不到国一啊(只有五个.. 出成绩的一刻波澜不惊,毕竟去年有国一了不慌哈哈哈 不过对我来说这个结果还算意料之外吧,毕竟大三 ...
- MyCat - 使用篇(5)
此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 意思就是,开头为北京的范围在A0000000~A9999999的根据后面的哈希值对5取模平均分布在0,1,2 ...
- 动态插入的html代码,点击节点无效以及获取节点下标的方法
动态插入的html,需要使用delegate或者on事件来监听,方式如下. 如果需要获取节点对应的下标,$(this).index()是无法获取的,需要以$(selectot).index(this) ...
- 洛谷 - P2324 - 骑士精神 - A*搜索
为什么估价是16,因为最后一步复原空格可以恢复两个位置,当然设成17.18都可以. #include<bits/stdc++.h> using namespace std; typedef ...