前端工程化 | 揭秘程序员的提速“外挂”

前端开发的工作往往需要把LESS/SASS编译成CSS文件,对多个JS、CSS文件进行合并与压缩处理,对JS、CSS进行语法的检查等,上面提到的这些都是一些重复性的操作,在开发过程中占据了大量的时间,降低了开发效率。对于大量重复性的操作是不是可以交给工具来处理,我们只需要告诉工具需要处理哪些操作。那么今天要给大家介绍的工具是Gulp。

本文内容概要:

1 什么是Gulp

2 Gulp VS Grunt

3 Gulp的安装与使用

4 命令行的简单介绍

1 什么是Gulp

Gulp是一个前端自动化构建工具,在项目开发过程中,开发工程师可以使用它自动化地完成JavaScript、SASS、LESS、HTML、IMG、CSS等文件的编译、检查、压缩、合并、格式化、浏览器自动刷新、项目打包,并监听文件在改动后重复指定这些操作。

另外,Gulp是基于Node.js构建的,利用Node.js流的优势,让开发工程师可以快速构建项目并减少频繁的 IO 操作。Gulp.js和用来定义任务的 Gulp的配置文件都是通过 JavaScript来实现的,便于开发工程师快速掌握Gulp。

我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

2 Gulp VS Grunt

易用性:Gulp相比Grunt更简洁,而且遵循代码优于配置策略,Gulp让简单的任务简单,复杂的任务可管理,维护Gulp更像是写代码;

高效性:Gulp相比Grunt更有设计感,利用Node.js流的威力,你可以快速构建项目并减少频繁的IO(文件写入与读取)操作;

高质量:Gulp有严格的插件指南确保插件如你期望的那样简洁高质的工作,而且Gulp的每个插件只完成一个功能,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅能压缩图片,同时还包括缓存功能。在Gulp中,缓存是另外一个插件,可以被别的插件使用,这样就促进了插件的可重用性;

易学习:Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要执行任务(操作);

3 Gulp的安装与使用

在学习Gulp之前,先给大家大致的介绍一下Gulp的安装与使用。首先当然要先安装Node.js,通过Node.js全局安装Gulp和项目安装Gulp,其次在项目里安装需要使用的Gulp插件,然后新建Gulp的配置文件gulpfile.js来定义Gulp要处理的操作/任务,最后通过Gulp的命令运行定义好要执行的任务(操作)。

3.1 流程:

3.1.1 安装Node.js ->

3.1.2 全局安装Gulp ->

3.1.3 项目安装Gulp ->

3.1.4 项目安装Gulp插件 ->

3.1.5 配置gulpfile.js ->

3.1.6 运行Gulp定义好的任务

3.1.1 安装Node.js ->

说明:因为Gulp是基于Node.js构建的,所以需要安装Node.js。

安装:官网的下载地址:https://nodejs.org/download/,选择相应的安装包,下载即可。

window系统,使用Windows Installer (.msi)即可。双击安装包,一直下一步即可,Node.js会自动把环境变量配好~

如果你使用的是Windows8的话,有可能报错。error 2502,error2503错误原因是你的权限不够。解决方法是用管理员权限运行此文件,鼠标右击window图标,点击命令提示符(管理员)。之后把你的安装包所在路径输入进去就行了,这样打开安装包就不会报错了。

执行node -v的命令查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。

3.1.2 全局安装Gulp

说明:全局安装Gulp的目的是为了执行Gulp任务/操作。

安装:执行命令npm install --global gulp进行全局安装Gulp。

执行gulp -v的命令,出现版本号即为正确安装。

3.1.3 项目安装Gulp

说明:项目安装Gulp的目的是为了调用Gulp的插件,比如调用gulp-less插件,它是将LESS预处理为CSS的插件。

安装:执行npm install --save-dev gulp的命令进行项目安装Gulp。

3.1.4 项目安装Gulp插件

说明:在这边先带着大家安装一个Gulp的插件:gulp-less插件。

安装:执行npm install gulp-less --save-dev的命令进行安装gulp-less的插件。

PS:如果想在安装的时候把插件写进项目package.json文件的依赖中,则可以加上--save-dev。至于为什么要写进package.json,将在后期的文章进行讲解。

3.1.5 配置gulpfile.js

说明:gulpfile.js是Gulp的配置文件,放置于项目根目录的js文件。

代码:

// 引入Gulp安装好的插件 require('模块名称') 
var gulp = require('gulp'), 
    less = require('gulp-less');
 
// 定义一个gulp_less任务,名称自定义即可
gulp.task('gulp_less', function () {
    // less文件地址
    gulp.src('less/index.less') 
    // 调用gulp-less插件的功能
    .pipe(less()) 
    // 生成index.css(less预处理的css文件)
    .pipe(gulp.dest('css')); 
});

3.1.6 运行Gulp定义好的任务

执行Gulp的任务命令:gulp 任务名称。

说明:在这里我们要运行gulpfile.js定义好的gulp_less任务,执行的命令是gulp gulp_less。

4 命令行的简单介绍

cd命令定位到具体的目录:cd + 路径。

比如:定位到F盘下的gulp文件夹。

dir命令用来列出当前目录下的文件列表。

比如:列出F盘gulp文件夹下的文件列表。

cls清空命令提示符窗口内容。

参考资料:

【Aomine】https://segmentfault.com/a/1190000002491282

【Gulp中文网】http://www.gulpjs.com.cn/

【Gulp官网】http://gulpjs.com/

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2132
来自专栏ASP.NETCore

ASP.NET Core 整合Autofac和Castle实现自动AOP拦截

除了ASP.NETCore自带的IOC容器外,我们还可以使用其他成熟的DI框架,如Autofac,StructureMap等(笔者只用过Unity,Ninjec...

674
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4537
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4688
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2527
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

30810
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

3985
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2506
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5346

扫码关注云+社区