前端自动化构建工具——gulp环境搭建教程

gulp是前端工程化的工具，它可以对html,css,js等代码和图片进行压缩，也可以对sass和less等预处理语言进行编译，代码部署。gulp学起来简单，用起来方便，大大提高我们工作效率。

这里可以参考CTOLib码库的gulp基本教程 ||《gulp中文网》

安装node.js

因为gulp是基于node.js的，所以先要安装一下node.js。在网页中打开node官网安装就可以:https://nodejs.org/en/

使用命令行

小编习惯用git的命令工具，当然我们可以使用Windows的命令提示符。如下：

我们直接在开始菜单搜索cmd

然后回车就会打开命令提示符窗口，

我们输入命令node -v,点击回车，便可以查看node的版本，如果没有出现版本号，则说明安装失败。

查看node和npm版本

npm（node package manager）nodejs的包管理器，用于nodejs插件的安装、卸载、管理依赖等；我们需要用npm去安装gulp和gulp的依赖包。

淘宝镜像

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事

官方网址：http://npm.taobao.org；

在命令提示符中输入一下命令按回车安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完后我们可以用cnpm -v检查是否安装成功。注意，安装成功后关闭命令行窗口在打开，如果安装后直接使用可能会出现错误。

安装gulp

使用gulp需要在全局和项目中都安装。

在全局中安装命令:

$npm install --global gulp

然后我们进入我们的项目根目，，小编在E盘创建一个名为demo的项目为例。

这里我们先讲几个dos的命令：

• e: 进入E盘

• cd +文件名 进入指定目录

• dir 查看当前目录中的文件

我们在命令提示符中执行cd demo命令就可以进入到项目根目录安装gulp了。

作为项目的开发依赖（devDependencies）安装（项目根目录）：

$cnpm install --save-dev gulp

安装成功后，项目会自动生成如下目录：

第一个目录里面是项目的依赖包，第二个文件是管理你本地安装的npm包。打开package.json文件可以看到我们安装了gulp并展示了它的版本号。

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。在之前是用cnpm init去配置它。

$cnpm init

gulp配置文件

gulpfile.js 是gulp不可缺少的配置文件，在项目根目录下创建一个名为 gulpfile.js 的文件,配置如下：

执行gulp命令：

$gulp

默认的任务会被运行，当然这个任务目前没有做任何事。

好啦，gulp的安装和配置就讲完了，之后要安装配置gulp的常用插件。

常用Gulp插件汇总-----

HTML和CSS

autoprefixer - 解析CSS并通过我可以使用添加供应商前缀到规则。

gulp-browser-sync - 在建立网站时保持多个浏览器和设备同步。

gulp-useref - 解析HTML文件中的构建块，以替换对未优化的脚本或样式表的引用。

gulp-email-design - 设计和测试HTML电子邮件模板的工作流程。

gulp-uncss - 从您的项目中删除未使用的CSS。

gulp-csso - 非常酷的CSS minificator。另外，还有很多CSS优化器和基准测试（GitHub）。但是最近我看到了没有Gulp的最强大的速记(shortthand)工具，它确实如此：

a{
    font-family：Arial;
    font-style：italic;
    font-size：14px;
    line-height：18px;
    font-weight：bold;
    background-image：url（'example.png'）;
    background-color: red;
    background-size：cover;
    background-repeat: no-repeat;
} 

=> 

a{
  font：italic bold 14px / 18px Arial;
  background: red url('example.png') no-repeat / cover;
}

gulp-htmlmin - 整齐的HTML minificator。

gulp-csscomb - 改进你的CSS的结构。

gulp-csslint - CSS linter。

gulp-htmlhint - HTML验证器。

gulp-processhtml - 在编译时处理html文件以随意修改它们。

JavaScript的

gulp-autopolyfiller - 精确的polyfills。这就像Autoprefixer，但对JavaScript填充。

gulp -babel - 编写下一代JavaScript的编译器。

gulp-jsfmt - 用于格式化，搜索和重写JavaScript。

gulp-jscs - 用于检查JavaScript代码样式。

gulp-modernizr - 建立一个精益，意味着的Modernizr 检测器。

gulp-express - 使用Express.js Web服务器启动（并监督），与socket.io配合使用

gulp-requirejs和gulp- browserify- 分别优化RequireJS和Browserify的工作。

gulp-plato - 生成静态分析报告。

gulp-complexity - 使用Halstead和Cyclomatic指标评估代码可维护性。

fixmyjs -通过JSHint (gulp-jshint)自动修复傻瓜式的lint错误。

gulp-jscpd - 用于编程源代码的复制/粘贴检测器。

gulp-buddy.js - 用于javascript的幻数检测。

gulp-jsonlint - JSON验证器。

gulp-uglify - JavaScript压缩器。

gulp-concat - 连接文件。

单元测试

• • gulp-nodeunit
  • gulp-jasmine
  • gulp-qunit
  • gulp-mocha
  • gulp-karma

图像

gulpicon - 神秘的CSS图标解决方案。

gulp-iconfont - SVG到webfont转换器。

gulp-responsive - 为响应式网站制作不同大小的图片。

gulp-sharp - 用于生产JPEG，PNG，WebP和TIFF图像的最快模块。

gulp-svgstore - 从文件夹合并SVG。

gulp-imacss - 将图像文件转换为数据URI的应用程序和库。

gulp-imagemin иgulp-tinypng或fimage压缩。

gulp-spritesmith - 将一组图像转换为spritesheet和相应的CSS变量。

其他

gulp-grunt - 能够从Gulp运行Grunt任务。

gulp-watch - 每当观看文件改变时运行任务。

gulp-notify - 当Gulp任务失败时，系统通知中心的自动错误消息。

gulp-git - 能够使用Git命令。

gulp-jsdoc - 通过运行JSDoc3生成JavaScript文档。

gulp-rev - 通过内容散列修改静态文件资产。

gulp-bump - 在包JSON和gulp-update中增加版本，它会自动更新包。

gulp-bower-files - 注入Bower软件包。

gulp-removelogs - 删除控制台日志记录语句。

gulp-preprocess - 根据环境配置预处理文件。

gulp-duration - 显示Gulp任务的执行时间。

gulp-changed和gulp-newer - 只运行自上次成功运行后修改的源文件的Gulp任务。

gulp-connect - 简单的静态web服务器。

gulp-shell - 运行Shell命令。

gulp-ssh - 提供了通过SSH和SFTP进行连接的功能。

gulp-zip - 压缩文件和文件夹..

gulp-clean和gulp-copy - 分别删除和复制来源。

gulp-replace - 在文本文件中搜索和替换字符串。

gulp-filesize - 以可读格式显示文件的大小。

gulp-util - 用于开发Gulp插件的实用程序。

编译器

• gulp-less - LESS在CSS中。
• gulp-sass - СSS中的SASS / SCSS。
• gulp-compass - CSS中带有SASS的样式指南。
• gulp-stylus - 在CSS中stylus(CSS的预处理框架)。
• gulp-coffee - JavaScript中的CoffeeScript。
• gulp-typescript - JavaScript中的TypeScript。
• gulp-jade - HTML中的Jade。
• gulp-handlebars - JST中的Handlebars模块（javascript/jquery模板引擎）。
• gulp-jst - JST中的Underscore模块（一个 JavaScript工具库）。
• gulp-react - Facebook中的React JSST模块。
• gulp-nunjucks - JST中的Nunjucks模块。
• gulp-dustjs - JST中的dustjs模块。
• gulp-angular-templatecache - JST中的AngularJS模块。

最后

• psi - PageSpeed洞察报告。
• tmi - TMI（太多图片） - 在网络上发现您的图片重量。
• ngrok - 本地主机的内省隧道（反向代理：一个从公共端点到本机的隧道）。
• pageres - 响应式网站截图。
• matchdep - 过滤npm模块依赖关系。
• 也许你想在编辑器中直接使用一些自动化方法，所以看看The Best Plugins for Sublime Text。

https://github.com/Pestov/essential-gulp-plugins

扩展阅读

混淆JavaScript代码的gulp插件：
gulp-obfuscate使用Gulp.js来自动化你的任务
以开发者的视角整理编排的前端开发所使用的语言的主流学习资源
Gulp上手指南
Gulp，比Grunt更好用的前端构建工具

为您推荐

HTML解析引擎：Jumony搭建
一个免费的，无限流量的Blog ---- github页面和Jekyll入门
Vue.js基本语法的介绍
移动前端 - 图片压缩上传实践
.NET的WebSocket开发包比较