前言:大家可能都听说过gulp,知道它是一种前端自动化开发工具,可以用来文件压缩、语法检查、文件合并和编译less等,但可能并不知道要怎么用?看过官方文档,也看过许多博客,但基本都是讲gulp的API和各类插件,一直不太清楚到底应该怎么着手使用gulp。本文就根据我最近对一些了解,从头开始一步步实现对gulp的应用。

你可以提前看一看gulp官方文档了解一下,不了解也没事,在实践过程中遇到了再去查。

全局安装gulp

gulp时基于node.js的,所以安装之前需要保证你安装了node.js。接下来安装gulp。

打开命令行,全局安装gulp:

npm install -g gulp

-g表示在全局安装gulp(之后在项目还需要局部安装gulp),可以通过gulp -v查看是否安装成功,如果现实版本号即为安装成功。

完成了gulp全局安装,接下来我们就要进入项目了。新建一个项目文件夹gulp_test,并cd到此文件夹下。

生成package.json文件

package.json是node.js用来描述项目的一个文件,这里可以理解为是对gulp_test项目的描述:比如这个项目的名字是什么、作者是谁、依赖哪些插件等等。

在gulp_test文件夹下采用npm init命令就可以自动生成package.json文件,这时候会提示你输入对项目的描述,回车即可,如果你想填也可以填好后回车。

一路回车结束后,会发现gulp_test文件夹里出现一个package.json文件,里面的信息正是你填的信息。这个文件也可以你自己手动创建,将你要填的信息写好保存为package.json就行。

安装gulp

此次安装是在项目文件中的局部安装:

npm install gulp --save-dev

--save表示将此次安装保存到package.json文件中,-dev表示安装在package.json的devDependencies中(具体可参见package.json中devDependencies与dependencies的区别),也就是说告诉描述文件package.json此项目中安装了gulp。安装后会发现package.json文件多出了如下描述(如果命令中没--save,就不会出现,需要自己添加):

且项目文件gulp_test多出了一个node_modules文件夹。node_modules文件夹中就保存着我们安装的插件,之后安装的插件也都保存在其中。

安装插件

这一步要根据你的需要来,你需要实现什么功能就安装什么插件。我们就以文章最开始提到的功能之一文件压缩为例,进行实践讲解。

npm install --save-dev gulp-uglify gulp-minify-html

gulp-uglify是js文件压缩插件,gulp-minify-html是对html文件压缩插件,多个插件之间以空格隔开即可。同样安装后,会发现package.json中多了以上两项依赖。

到这里,所有准备工作就都完成了,接下来我们开始看看如何使用gulp实现我们想要实现的功能。

gulpfile.js文件

所有要实现的任务都写在gulpfile.js中。gulpfile.js文件的内容大致分为两部分:1)引入插件;2)任务配置

1)引入插件

此处引入的插件是我们在上面安装的插件,没有安装的插件引入会出错。

var gulp = require('gulp');
var uglify = require('gulp-uglify'); //js压缩
var minifyhtml = require('gulp-minify-html'); //html压缩

2)任务配置

比如我们项目的html/css/js文件都在src文件夹中,想要压缩之后放到dist文件中:

gulp.task('uglify',function(){
gulp.src('src/js/*.js') //文件所在位置
.pipe(uglify()) //执行js压缩
.pipe(gulp.dest('dist/js'));//压缩后放到目标文件dist中,dist文件夹不用自己手动新建
});

gulp.task,gulp.src,gulp.dest为gulp的3个主要API,在以上例子中分别表示:

  • gulp.task表示创建一个名为uglify的任务
  • gulp.src表示此任务的原地址
  • gulp.dest表示此任务的目标地址

我们在src/js/main.js文件中随意写两行代码:

var str = "hello world!";
console.log(str);

然后执行gulp uglify

然后,我们会发现gulp_test文件夹下多了一个dist文件夹,且dist/js/main.js文件中的代码已经经过压缩(较长的代码看得更清楚些)

如果uglify任务需要依赖其他任务(即其他任务先执行完成,再执行uglify任务),我们可以这样写:

var gulp = require('gulp');
var uglify = require('gulp-uglify'); //js压缩
var minifyhtml = require('gulp-minify-html'); //html压缩 gulp.task('minifyhtml',function(){
gulp.src('src/*.html') //文件所在位置
.pipe(minifyhtml()) //执行js压缩
.pipe(gulp.dest('dist'));//压缩后放到目标文件dist中,dist文件夹不用自己手动新建
});
gulp.task('uglify',['minifyhtml'],function(){
gulp.src('src/js/*.js') //文件所在位置
.pipe(uglify()) //执行js压缩
.pipe(gulp.dest('dist/js'));//压缩后放到目标文件dist中,dist文件夹不用自己手动新建
});
gulp.task('default',['uglify']);//默认任务

以上代码表示执行uglify任务之前,需要先执行minifyhtml任务,最后一行定义默认任务为uglify,这样我们只需要执行命令gulp,就会默认执行uglify,而uglify又依赖任务minifyhtml,所以执行一个命令gulp后,以上两个任务就都只都执行了。在实际项目中,我们这样写清楚依赖,就可以一行命令完成所有任务了。

项目上传或下载

现在我们项目已经完成了,需要上传到github,可是node_modules中的插件一般有十几M呢,我们要都上传么?当然不用,如果这样一个大项目依赖那么多插件,岂不是要泪崩。这时候就可以看出package.json的用处了,我们不需要上传node_modules文件夹,因为package.json已经记录了我们所依赖的插件,只要上传这个文件其他人就可以知道此项目依赖了哪些插件。其他人下载下来后,只需要输入命令npm install,npm就会自动读取package.json,将其中的插件下载。

当然,node_modules文件也不用我们手动删除,可以使用 .gitignore 文件来过滤掉这个文件夹,禁止 git 追踪。

小结

一次完整的gulp实践流程就完成啦,这只是一个小例子,希望帮助大家了解gulp到底怎么用。更多的用法就靠我们慢慢发现和摸索了,不懂的就去查查gulp官方API

gulp入门实践的更多相关文章

  1. webpack的入门实践,看这篇就够了

    webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 ...

  2. 分布式学习系列【dubbo入门实践】

    分布式学习系列[dubbo入门实践] dubbo架构 组成部分:provider,consumer,registry,monitor: provider,consumer注册,订阅类似于消息队列的注册 ...

  3. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

  4. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  5. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  6. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  7. Django入门实践(三)

    Django入门实践(三) Django简单应用 前面简单示例说明了views和Template的工作过程,但是Django最核心的是App,涉及到App则会和Model(数据库)打交道.下面举的例子 ...

  8. Django入门实践(二)

    Django入门实践(二) Django模板简单实例 上篇中将html写在了views中,这种混合方式(指Template和views混在一起)不适合大型开发,而且代码不易管理和维护,下面就用Djan ...

  9. Django入门实践(一)

    Django入门实践(一) Django编程思路+入门 认识Django有一个多月了,我觉得学习Django应该先理清它的编程思路.它是典型的MVC框架(在Django里也称MTV),我觉得Djang ...

随机推荐

  1. NPM install 中:-save 、 -save-dev 和 没有--save的情况

    原文地址:https://www.cnblogs.com/limitcode/p/7906447.html npm install moduleName 命令 . 安装模块到项目node_module ...

  2. Elasticsearch地理位置总结

    更多内容请参考 : https://www.felayman.com 翻译版本:https://es.xiaoleilu.com/310_Geopoints/00_Intro.html 官方原文:ht ...

  3. jQuery.cookie的使用指南

    一个轻量级的cookie 插件,可以读取.写入.删除 cookie. 配置 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. <script type=&q ...

  4. Lora通信解决方案对比

    欢迎大家进群交流分享:QQ群:773082801

  5. 把本地git仓库的项目上传到远程仓库

    之前在学校实验室服务器上建了一个git远程仓库,存放我写的express项目代码.后来由于出去实习,就无法访问那个远程仓库了,因为它在校园网内. 还好我的笔记本中有这个项目完整的本地仓库,于是我就试着 ...

  6. window本地运行mapreduce程序

    mapreduce的运行方式一般有两种,一是从本地导出一个jar包,在传到虚拟机上运行,这样调试起来非常的不方便,如果出现错误就需要重新导出jar包. 第二种方式是在本地直接运行,但是在运行前需要进行 ...

  7. 【CODECHEF】Children Trips 倍增

    此题绝了,$O(n^{1.5}\ log\ n)$都可以过掉.... 题目大意:给你一颗$n$个点的树,每条边边权不是2就是$1$,有$m$个询问,每次询问一个人从$x$点走到$y$点,每天可以走的里 ...

  8. 【BZOJ3143】【HNOI2013】游走 高斯消元

    题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3143 我们令$P_i$表示从第i号点出发的期望次数.则$P_n$显然为$0$. 对于$P ...

  9. OS之进程管理 --- 死锁

    什么是死锁 在正常操作模式下,进程按如下顺序来使用资源: 申请:进程请求资源 使用:进程对资源进行操作 释放:进程释放资源 当一组进程中的每一个进程度在等待一个事件,而这事件只能有一组进程的另一个进程 ...

  10. phpstorm之自定义代码碎片(tab键自动填充代码)

    打开phpstorm 的设置界面(快捷键ctrl+alt+s) 比如上面的form表单,需要在生成以后自动跳转到“名称”的位置,然后更改,可以如下修改