黑马程序员技术交流社区

标题: 【广州前端】人生苦短 01-gulp.js的简介与安装 [打印本页]

---

作者: neekin    时间: 2017-12-21 10:32
标题: 【广州前端】人生苦短 01-gulp.js的简介与安装


更多前端资源敬请关注

我计划是写一个系列的文章，不会是hello world那样浅尝即止的文章，大概十篇左右来给大家介绍gulp并让大家学会使用gulp。

0x00 gulp是什么？

gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。gulp.js 源文件和你用来定义任务的 gulp 文件都是通过 JavaScript源码来实现的。

0x01 gulp的优点是什么？易于使用

通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。

构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

丰富插件

gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习

通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

0x02 gulp的使用场景？

随着前端项目的日渐复杂，项目结构也不是简单的html+css+js了，各种前端模板引擎、预编译语言等层出不穷，为了配合使用最新的前端技术以及快速的将模板引擎编译打包甚至部署，将我们从繁琐的任务流程解放出来。

0x03 安装

我首先默认你已经安装了node.js并且会使用npm一些基本的命令

[JavaScript] 纯文本查看 复制代码

#先确认好已经安装过node并且能执行

node -v

v8.9.1

npm -v

5.5.1



#然后安装gulp,注意，一定要使用全局安装

npm install -g gulp

0x04 开始试一试

• 首先创建一个文件夹,随便起一个名字就好，我这里使用gulptest.
• 然后再在这个目录里，创建一个js文件，文件名必须得是 gulpfile.js 这是规定死的。
• 需要局部安装一下gulp,待会让文件可以引用
  

[JavaScript] 纯文本查看 复制代码

#使用cmd或者其他shell 使用cd命令进入到这个目录了，然后进行安装，这次和上面的全局命令稍微有点不同

npm init #输完命令后，一直回车即可

#然后安装gulp

npm install  --save-dev gulp

# 如果安装顺利，你的目录里会出现一个node_module目录和package.json文件

    4.开始撰写第一个任务 用你最喜欢的编辑器，打开gulpfile.js，写入以下代码

[JavaScript] 纯文本查看 复制代码

var gulp = require('gulp');

gulp.task('default',function(){

      console.log('Hello Wrold');

})

保存，然后再在cmd或者shell 运行 gulp,你应该能看到一句 hello world，我们的第一个gulp任务完成了。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2