关键词：
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开发需要学习啥？
...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情
零基础学习前端开发要怎么开始
...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情
vuejs+es6开发移动端app实战项目笔记
一、什么是MVVM框架MV*包括MVC、MVP、MVVMMVVM框架由Model、View、ViewModel构成。Model指的是数据，在前端对应的是JavaScript对象。View指的是视图，在前端对应的是DOMViewModel观察Model和View的变化来做更新，实现了数据的双向绑定。前端MVVM... 查看详情
vuejs+es6开发移动端app实战项目笔记
一、什么是MVVM框架MV*包括MVC、MVP、MVVMMVVM框架由Model、View、ViewModel构成。Model指的是数据，在前端对应的是JavaScript对象。View指的是视图，在前端对应的是DOMViewModel观察Model和View的变化来做更新，实现了数据的双向绑定。前端MVVM... 查看详情
移动端web开发初探之vuejs的简单实战
...，因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。在这过程中遇到了不少有意思的东西。DEMO的github地址在这里内容提要：meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探meta标签这点与在PC... 查看详情
学前端都学啥比较好？
...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情
前端开发必学的技术都有哪些？
...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情
前端css3笔记
...sp;CSS3的现状1、浏览器支持程度差，需要添加私有前缀2、移动端支持优于PC端3、不断改进中4、应用相对广泛1.2 如何对待1、坚持渐进增强原则2、考虑用户群体 查看详情
北京web前端培训机构，出来好找工作吗，需要学哪些内容？
...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情
[笔记]《vue移动开发实战技巧》-vue-router使用
一、动态路由匹配 动态路由匹配指的是把某种模式的路由，全都映射到同一组件。constUser={template:‘<div>User</div>‘}constrouter=newVueRouter({routes:[{//动态路径参数，以:开头{path:‘/user/:id‘,component:User}}]}) 查看详情
从零搭建移动h5开发项目实战(代码片段)
从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多数用户的交互界面，后来逐渐的前端H5开发找到了自己的技术优势，慢慢的... 查看详情
从零搭建移动h5开发项目实战(代码片段)
从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多数用户的交互界面，后来逐渐的前端H5开发找到了自己的技术优势，慢慢的... 查看详情
移动app开发框架盘点2：web移动前端框架大全
...开始了。之后在2015年5月开源的ReactNative又开启了属于Web移动前端的周期，15-16年，18-19年，21-22年正好就是属于移动前端的三个爆发点。 前言 自上次发布了《移动APP开发框架盘点》后，时间已经过去了三年，为什么突然... 查看详情
vue.js高效前端开发•初识vue.js(代码片段)
全部章节>>>>文章目录一、Vue概述1、Web前端框架介绍2、MVC和MVVM3、Vue介绍4、安装Vue二、Vue使用1、第一个Vue应用2、Vue的双向绑定3、实践练习三、Vue生命周期1、Vue的实例和数据2、Vue生命周期钩子函数3、实践练习四、过滤... 查看详情
2023年web前端开发学习路线图
...f1a;新手入门1.Web前端零基础入门HTML5+CSS3+前端项目2.移动web开发实战第二阶段：技术进阶1.JavaScript深入浅出-0基础入门神器2.JavaScript核心之WebAPIs3.数据交互&异步编程-前端进阶Ajax零基础入门第三阶段：VUE开发1.前端... 查看详情
前端如何高效的与后端协作开发(代码片段)
前端如何高效的与后端协作开发1.前后端分离前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。可以参考：前后端分离、web与static服务器分离2.尽量... 查看详情
vue开发实战实战篇#35：如何高效地使用mock数据进行开发(代码片段)
说明【Vue开发实战】学习笔记。效果我们通过mock数据来进行开发，比如下面的图表数据来自我们的mock数据调用接口http://localhost:8080/api/dashboard/chart?id=kaimo313安装依赖npminstall--saveaxios编写mock新建ant-design-vue-pro\\mock\\dashboard_c... 查看详情
《reactnative入门与实战》读书笔记
...avaScript代码可以使用后端强大的Web方式管理，既可以做到高效开发，也可以做到快速部署和问题热修复。ReactNativeAPP运行在客户的手机上，而控制端可以在后端，可以 查看详情