gulp入门教程

日期:2015-09-15 20:40:14

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。


关于gulp的介绍暂时先不啰嗦了,说说她能干什么吧,在我们项目中经常会遇到文件合并,文本替换、图片压缩、文件拷贝、代码压缩等需要手动去完成的任务,有了gulp我们就可以省去这些操作,交给gulp去完成。


准备

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务


安装nodejs

gulp是基于nodejs,理所当然需要安装nodejs。打开node.js官网会看到一个醒目的绿色按钮,点击下载,网站会判断我们的系统环境给我们需要的安装包。下载完一路next就安装完成了。

QQ截图20150915205021.png

安装完成后打开命令行分别键入:

node -v

npm -v

QQ截图20150915205949.png

如果出现版本号就说明node成功成功安装,npm是在安装nodejs时一同安装的nodejs包管理器,以后用到的频率非常高,安装每一个gulp插件都要用到它。


全局安装gulp

安装全局gulp是用它执行后面的任务,打开命令行键入下面的命令:

npm install -g gulp

其中-g就是global全局的意思,等待安装完成查看版本号,全局gulp就安装完成了。

QQ截图20150915212009.png

如果安装过程太慢的话可以切换到淘宝 NPM 镜像,淘宝NPM镜像上说明:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”,所以不用担心在国外服务器下载插件很慢的情况了。

使用说明

你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

安装模块

registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.

$ cnpm install [name]

同步模块

直接通过 sync 命令马上同步一个模块, 只有 cnpm 命令行才有此功能:

$ cnpm sync connect

当然, 你可以直接通过 web 方式来同步: /sync/connect

$ open https://npm.taobao.org/sync/connect

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。


初始化gulp项目

新建一个空的文件夹,或是在现有目录下执行命令:

$ cnpm install gulp

注意,这里不再是全局安装了,接下来可以在项目根目录看到一个node_modules这是gulp运行所必须依赖的环境。

QQ截图20150915215618.png

接着创建package.json文件,继续键入命令:

$ cnpm init

一路回车后在项目目录多出来一个package.json文件,在编辑器中打开,可以编辑里面的信息,但是不能添加任何注释。

{
  "name": "gulp-init",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp": "^3.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装gulp插件

在项目根目录下执行安装命令,以gulp-compass为例:

$ cnpm install gulp-compass --save-dev

这条命令意思是下载gulp-compass插件,--save-dev是把这个插件保存到package.json文件,在package.json文件devDependencies(开发环境依赖模块)里我们会看到多出一行"gulp-compass": "^2.1.0",这是至关重要的,以后每以上述方式安装一个插件就会在pacakge.json文件的开发环境依赖模块里多出一条插件的信息。


接着打开node_modules目录看到gulp-compass文件夹,进入以后可以看到README.md文件,打开它可以看到一些它的使用信息。


新建gulpfile.js文件(重要)

gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件,每安装一个gulp插件就需要在这个文件里配置插件运行所需要的命令。下面以gulp-compass为例

// 引入 gulp
var gulp = require('gulp'),
    compass = require('gulp-compass');//引入gulp-compass插件

//创建一个compass的任务
gulp.task('compass', function() {
    gulp.src('./sass/*.scss')
        .pipe(compass({
            config_file: './config.rb',
            css: 'stylesheets',
            sass: 'sass'
        }))
        .pipe(gulp.dest('app/assets/temp'));
});
//监听任务(当监听文件发生改变时就执行相应的任务)
gulp.task('watch', function() {
    gulp.watch('./sass/*.scss', ['compass']); // 监听所有.scss当发生改变,自动编译
    gulp.watch('./config.rb', ['compass']); //监听confirg.rb当发生改变,自动编译
});
//默认任务
gulp.task('default', ['compass', 'watch']);

到了这一步发现还没有创建一个compass项目,没关系,我们现在就来创建,创建compass项目的前提是我们系统中已经安装了compass所需要的环境ruby和gem,他们的关系跟node和npm有点类似。如果没有听过compass可以在我网站中找到相应的教程,这里就不做解释了。

QQ截图20150915224201.png

项目中多了几个文件,是用compass create命令创建的。


让gulp运行起来

上面已经列出gulp运行所具备的基本条件,下面我们就在项目根目录下键入命令,让配置好的gulp环境运行起来:

$ gulp

这条命令执行的是上面gulpfile.js里最后一行配置的任务,意思是运行compass任务并监听compass文件的改动,做出实时编译的动作,这条命令代替了compass和sass的监听命令,下面看看用gulp实现的效果。

QQ截图20150915225339.png

当修改scss文件时gulp也做出实时编译,这样就把编译scss的任务搬到gulp上来了。怎么样,这个课程看的有点头绪了吗?行动起来让gulp融入你的项目中去吧。