一, 什么是 gulp
gulp 是前端开发过程中对代码进行构建的工具, 是自动化项目的构建利器; 她不仅能对网站资源进行优化, 而且在开发过程中很多重复的任务能够使用正确的工具自动完成; 使用她, 我们不仅可以很愉快的编写代码, 而且大大提高我们的工作效率.
gulp 是基于 Node.JS 的自动任务运行器, 她能自动化地完成 JavaScript,coffee ,Sass,Less,html/image, CSS 等文件的测试, 检查, 合并, 压缩, 格式化, 浏览器自动刷新, 部署文件生成, 并监听文件在改动后重复指定的这些步骤.
二, 安装
gulp 是基于 Node.JS 的, 所以要先安装 Node.JS, 通过 Node.JS 的 NPM 全局安装和项目安装 gulp, 其次在项目里安装所需要的 gulp 插件, 然后新建 gulp 的配置文件 gulpfile.JS 并写好配置信息(定义 gulp 任务), 最后通过命令提示符运行 gulp 任务即可.
1, 安装 node
node.JS 官方安装包及源码下载地址: http://nodejs.org/download/ https://nodejs.org/download/
安装步骤参考:
2, 安装 gulp
2.1 以全局方式安装 gulp, 打开命令提示符执行下列命令 (打开方式: Windows + r 输入 cmd 回车) 输入下面命令, 然后回车:
NPM install -g gulp
2.2 全局安装 gulp 后, 还需要在每个要使用 gulp 的项目中都单独安装一次. 全局安装 gulp 是为了执行 gulp 任务, 本地安装 gulp 则是为了调用 gulp 插件的功能. 把目录切换到你的项目文件夹中, 然后在命令行中执行:
NPM install gulp
2.3 如果想在安装的时候把 gulp 写进项目 package.JSON 文件的依赖中, 则可以加上 - save-dev:
NPM install --save-dev gulp
这样就完成了 gulp 的安装, 接下来就可以在项目中应用 gulp 了.
3, 建立 gulpfile.JS 文件
gulp 也需要一个文件作为它的配置文件, 在 gulp 中这个文件叫做 gulpfile.JS. 新建一个文件名为 gulpfile.JS 的文件, 然后放到你的项目目录中. 之后要做的事情就是在 gulpfile.JS 文件中定义我们的任务了. 下面是一个最简单的 gulpfile.JS 文件内容示例, 它定义了一个默认的任务.
- var gulp = require('gulp'); // 本地安装 gulp 所用到的地方
- gulp.task('default',function(){
- // 定义默认任务
- console.log('My first gulp project!');
- });
目录结构如下:
执行任务, 输入命令:
gulp
默认的名为 default 的任务 (task) 将会被运行, 在这里, 这个任务做的事情是在控制台打印: My first gulp project!, 效果如下:
三, 总结
本文简单的介绍一下 gulp 安装及项目的创建过程, 下一篇我将介绍 gulp 使用的主要 API.
来源: http://www.bubuko.com/infodetail-3505839.html