热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript6和Sass应用

8.3.1安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npminstallgulp-cli–g

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。

 

更多信息关注:

 


推荐阅读
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 本打算教一步步实现koa-router,因为要解释的太多了,所以先简化成mini版本,从实现部分功能到阅读源码,希望能让你好理解一些。希望你之前有读过koa源码,没有的话,给你链接 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
  • JavaScript 实现图片文件转Base64编码的方法
    本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]
  • 利用 JavaScript 和 Node.js 验证时间的有效性
    本文探讨了如何使用 JavaScript 和 Node.js 验证时间的有效性。通过编写一个 `isTime` 函数,我们可以确保输入的时间格式正确且有效。该函数利用正则表达式匹配时间字符串,检查其是否符合常见的日期时间格式,如 `YYYY-MM-DD` 或 `HH:MM:SS`。此外,我们还介绍了如何处理不同时间格式的转换和验证,以提高代码的健壮性和可靠性。 ... [详细]
  • Go从入门到精通系列视频之go编程语言密码学哈希算法(二) ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • protobuf 使用心得:解析与编码陷阱
    本文记录了一次在广告系统中使用protobuf进行数据交换时遇到的问题及其解决过程。通过这次经历,我们将探讨protobuf的特性和编码机制,帮助开发者避免类似的陷阱。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • 协程作为一种并发设计模式,能有效简化Android平台上的异步代码处理。自Kotlin 1.3版本引入协程以来,这一特性基于其他语言的成熟理念,为开发者提供了新的工具,以增强应用的响应性和效率。 ... [详细]
  • Spring Boot使用AJAX从数据库读取数据异步刷新前端表格
      近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能,因为表格只占页面的一小部分,不希望整个也页面都随之刷新,所以首先想到了使用AJAX来实现。  以下介绍解决方法(请忽视 ... [详细]
  • 本文探讨了在UIScrollView上嵌入Webview时遇到的一个常见问题:点击图片放大并返回后,Webview无法立即滑动。我们将分析问题原因,并提供有效的解决方案。 ... [详细]
author-avatar
泡泡
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有