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

前端开发的工作往往需要把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 条评论
登录 后参与评论

相关文章

来自专栏雨过天晴

原 用u盘制作mac安装盘

1294
来自专栏Danny的专栏

学习中遇到的小技巧 二 (陆续更新……)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

664
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(7)--apk的打包与反编译

apk(android package)就是我们安卓系统的安装文件,可以在模拟器和手机中直接打开安装,从项目中打包apk有几种方式可取 一、最简单的方法(类似我...

18610
来自专栏运维技术迷

解决Sublime在LinuxMint下无法输入中文的问题

环境说明: 操作系统: Linux Mint 18 MATE 输入法管理:fcitx 一、创建sublime_imfix.c文件 进入sublime安装目录...

4227
来自专栏前端吧啦吧啦

手把手教你全家桶之React(三)--完结篇

1194
来自专栏容器云生态

监控利器之nagios原理详解

第一节 Nagios简介 nagios是系统管理人员和运维监控人员必须的工具之一,利用nagios可以监控本地或者远程主机资源, 如磁盘空间,系统负载等情况,...

2577
来自专栏逸鹏说道

VSCode插件MSSQL教程(昨天提了一下)

什么数据库都木有(系统自带的不算) ? 插件自己安装一下 ? 按F1,输命令 ? ? 连接就输入名字,创建就空着 ? ? 用户名和密码 ? ? 下次就不用再输了...

3549
来自专栏小狼的世界

Robots.txt和Robots META

robots.txt是一套指示搜索引擎(蜘蛛)如何抓取你的网页内容的一张地图,他告诉蜘蛛哪些需要抓取,哪些不要抓取(当然,这只是针对那些遵守这个协定的搜索引擎)...

582
来自专栏青玉伏案

iOS开发之使用XMPPFramework实现即时通信(二)

上篇的博客iOS开发之使用XMPPFramework实现即时通信(一)只是本篇的引子,本篇博客就给之前的微信加上即时通讯的功能,主要是对XMPPFramewor...

1786
来自专栏云计算

使用ThingsBoard查看物联网数据

ThingsBoard是一个开源平台,用于收集和可视化物联网设备的数据。可以将来自任意数量设备的数据发送到云服务器,在云服务器中可以通过可自定义的仪表板查看或共...

171

扫描关注云+社区