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

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

相关文章

来自专栏跟着阿笨一起玩NET

远程桌面连接的技巧

  选中本地磁盘D,然后点确定,这样 才后台服务器就能够直接访问本地D盘,连FTP都不用配置了。非常方便。

931
来自专栏云计算教程系列

如何在Ubuntu 18.04上安装Anaconda Python发行版

Anaconda专为数据科学和机器学习工作流程而设计,是一个开源包管理器,环境管理器,以及Python和R编程语言的分发。它通常用于大规模数据处理,科学计算和预...

2877
来自专栏生信技能树

perl模块安装大全

今天又有小伙伴微信问我perl模块安装的问题,因为ENSEMBL发布的大多数数据库以及软件都是基于perl的,尤其是分量很重的VEP,所以即使你再如何如何的讨厌...

3577
来自专栏计算机视觉

linux-Anaconda+conda创建python-tensorflow虚拟环境

1633
来自专栏逸鹏说道

AI---Anaconda For Linux (附C#交互式编程的引入)

Jupyter美化: https://www.cnblogs.com/dotnetcrazy/p/8760189.html

1846
来自专栏小文博客

WordPress插件——SM图床小工具插件

SM.MS图床外链小工具插件,是小文博客独自开发的图床插件,用于WordPress博客添加图床上传小工具以及评论框处添加上传图片按钮。

45713
来自专栏Petrichor的专栏

git: .gitignore文件 (忽略文件)

Note: 切记目录名后面 一定要加 反斜杠 / ,不然会当成 单文件 处理。

562
来自专栏程序猿

Burp Suite_pro_v1.7.32.jar破解教程以及下载链接

//更多内容欢迎点击原文链接查看。 > sha256sum burpsuite_pro_v1.7.32.jar 49c719e86611ccfdcda8cd23...

4359
来自专栏云计算教程系列

如何在Debian 9上安装Anaconda Python发行版

Anaconda是一个开源包管理器,环境管理器,以及Python和R编程语言的发行版。它专为数据科学和机器学习工作流程而设计,通常用于大规模数据处理,科学计算和...

623
来自专栏Web 开发

Linux Kernel 4.9 & BBR

Linode 自带的 Kernel 4.9 没有编译 BBR 模块进来,直接切换是不行的,得手动替换 Kernel。

800

扫码关注云+社区