gulp

来源：互联网发布：优化网站公司编辑：程序博客网时间：2024/04/29 22:26

gulp介绍

Glup使用node.js串流(streams)让建构更快速，不须写出资料到硬盘的暂存档案/目录。Gulp利用来源档案当作输入，串流到一群外挂(plugins)，最后取得输出的结果，并非配置每一个外挂的输入与输出–就像Grunt。配置简单，学习成本低，外挂多。

gulp 安装

全局安装

npm install gulp -g

项目内安装

npm install gulp --save-dev

开始使用

在项目根目录下新建gulpfile.js;gulpfile.js，这里定义gulp的任务，就可以在项目根目录下运行gulp [任务名]。
gulp有四个常用方法，src、dest、watch、task、pipe;
demo:

var gulp = require("gulp"); //引入gulp;gulp.task("default",function(){  console.log("gulp is working");});

在项目根目录下，运行命令行，看到’gulp is working’打印出来，说明gulp已经能用了。

gulp

注： gulp 默认任务名为default,所以可以省略。

task

gulp.task(name[, deps], fn)

作用

定义一个任务，在命令行使用，或被其它任务调用。

参数说明

ame : 字符串型，必要参数。可能值：符合js变量命名规范的任意字符串。作用：任务名。例如’minifyCss’。
deps :数组类型，可选参数。可能值：该文件定义过或引入过的其它gulp任务名，或者函数。作用：作为本任务的前置信赖，即deps数组里的任务执行完后，才会执行该任务。例如[‘copyImage’,’copyFont’]。
fn :函数，可选参数。可能值：可执行的函数。作用：该任务真正要做的事。如无该参数，仍会执行deps里所有任务。

src

gulp.src(globs[, options])

作用

输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

参数说明

globs : 字符串或数组，必要参数。可能值：字符串，或者数组（该数组成员为字符串）。作用：文件路径的匹配模式。例如’./src/js/*/’
options :Object类型，可选参数。可能的key：base,read,buffer等，用得很少，具体请查资料。例如gulp.src(‘js/*/‘,{base:’./src/’})

dest

gulp.dest(path[, options])

作用

能被 pipe 进来，并且将会写文件。并且重新输出所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

参数说明

path : 字符串或函数，必要参数。可能值：字符串，或者函数（该函数返回路径字符串）。作用：生成的目录。
options :Object类型，可选参数。可能的key：cwd,mode等，用得很少，具体请查资料。

watch

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

作用：

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来触发 change 事件。

gulp.watch(glob [, opts], tasks)

参数说明

glob : 字符串或数组，必要参数。可能值：字符串，或者数组（该数组成员为字符串）。作用：一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。例如’./src/js/*/’
opts : 字符串或数组,可选参数。
tasks : 数组，必要参数。需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

gulp.watch(glob [, opts], tasks)

参数说明

glob : 字符串或数组，必要参数。可能值：字符串，或者数组（该数组成员为字符串）。作用：一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。例如’./src/js/*/’
opts : 字符串或数组,可选参数。
cb : 函数。需要在文件变动后执行的函数。

常用gulp插件

gulp-connect

用于建立服务器。demo:

var gulp = require('gulp'),  connect = require('gulp-connect');gulp.task('connect', function() {  connect.server({    root: 'app',    livereload: true  });});gulp.task('html', function () {  gulp.src('./app/*.html')    .pipe(connect.reload());});gulp.task('watch', function () {  gulp.watch(['./app/*.html'], ['html']);});gulp.task('default', ['connect', 'watch']);

tips：port设置为80时，浏览器访问时可以省略端口号，livereload设为true,每当task触发connect.reload()时，浏览器端会自动刷新。chrome插件LiveReload.

gulp-minify-css

var gulp = require('gulp'),    cssmin = require('gulp-minify-css');gulp.task('testCssmin', function () {    gulp.src('src/css/*.css')        .pipe(cssmin())        .pipe(gulp.dest('dist/css'));});

gulp-ruby-sass

gulp-json-sass

gulp-webpack

gulp-rename

gulp-jade

gulp-data

minimist

gulp-autoprefixer

demo

gulpfile.js

var gulp      = require('gulp');var connect     = require("gulp-connect");var sass      = require('gulp-ruby-sass');var jsonSass  = require('gulp-json-sass');var webpack   = require('gulp-webpack');var rename    = require('gulp-rename');var jade      = require('gulp-jade');var data      = require("gulp-data");var open      = require('gulp-open');var minimist  = require("minimist");/* for auto replace images and API's path,jade and sass are invoked and configurable by json file.*build local by running: gulp --env local* build stage by running: gulp --env stage* build release by running: gulp --env release** */gulp.task("default",['connect','js','homeHtml','html','css','watch']);/** TODO config path*************/var rootPath= "../../";var projectPath= "./additional/early_birds/";var options={  webpackConfig:require('./config/webpack.config.js'),  srcJs: projectPath+'dev/',  srcSass: rootPath+'sass/additional/early_birds/early_birds.sass',  srcJade: rootPath+'jade/additional/early_birds/**/*',  srcHomeJade:rootPath+'jade/additional/early_birds/index.jade',  distJs: './',  distSass:rootPath+'style/additional/early_birds/',  distJade:rootPath+'views/additional/early_birds/',  watchJs:  './dev/*.*',  watchSass:rootPath+'sass/additional/early_birds/**/*',  watchJade: rootPath+'jade/additional/early_birds/**/*',  connectConfig:{    root: rootPath,    server: '0.0.0.0',    livereload: true,    port: 80  },  envDefaultOptions:{    string: 'env',    default:{env: process.env.NODE_ENV||'local'}  }};options.ENV_CONFIG = minimist(process.argv.slice(2),options.envDefaultOptions);options.env_jade_json ='./config/'+( options.ENV_CONFIG.env)+".jade.json";options.env_sass_json ='./config/'+( options.ENV_CONFIG.env)+".sass.json";/**********config end*************//* TODO server */gulp.task('connect',function(){  connect.server(options.connectConfig);});/* TODO  build js*/gulp.task('js', function () {  console.log('----js----');  return gulp.src(options.srcJs)    .pipe(webpack(options.webpackConfig))    .pipe(gulp.dest(options.distJs))    .pipe(connect.reload())});/* TODO build css*/gulp.task('cssConfig', function() { //这个任务根据命令生成一个 env.sass文件。  return gulp    .src(options.env_sass_json)    .pipe(jsonSass({      sass: true    }))    .pipe(rename("env.sass"))    .pipe(gulp.dest(options.srcSass.slice(0,options.srcSass.lastIndexOf("/")+1)));//确保和sass入口文件在同一目录下});gulp.task("css",['cssConfig'],function(){  console.log('----css----');  return sass(options.srcSass)    .on('error',sass.logError)    .pipe(rename({suffix:'.min'}))    .pipe(gulp.dest(options.distSass))    .pipe(connect.reload())});/* TODO  build html*/gulp.task('html',function(){  console.log("-----html------");  console.time('htmlChanged');  return gulp.src([options.srcJade,'!'+options.srcHomeJade])    .pipe(data(require(options.env_jade_json)))    .pipe(jade({pretty:true}))    .pipe(gulp.dest(options.distJade))    .pipe(connect.reload())});gulp.task("homeHtml",function(){  console.log("-----home html------");  console.time('htmlChanged');  return gulp.src(options.srcHomeJade)    .pipe(data(require(options.env_jade_json)))    .pipe(jade({pretty:true}))    .pipe(gulp.dest(""))    .pipe(connect.reload())});/* TODO watch*/gulp.task("watch",function(){  gulp.watch([options.watchJs],['js']);  gulp.watch([options.watchSass],['css']);  gulp.watch([options.watchJade],['html','homeHtml']);});

文件结构

proj 项目目录
— index.html 入口页
— lib-pack.js js库打包生成文件
— earlyBirds-pack.js 项目js打包生成文件
— gulpfile.js 不解释
— config 用于编译sass和jade的常量文件
— — local.jade.json {"imgHost": "http://test.bolo.me/"}
— — local.sass.json { "imgHost": "'http://test.bolo.me/'"}
— — stage.jade.json
— — stage.sass.json
— — release.jade.json
— — release.sass.json
— dev
— — index.js js入口
— — module.js angular模块
— — module.router.js angular模块路由
— — module.service.js
— — module.directive.js
— — module.rootController.js

文件举例

index.sass

@import "env" //这个env.sass是根据config中*.sass.json生成的@import "often"@import "page2"@import "application"@import "center"@import "home2"  .btn_niao    background-image: url('#{$imgHost}/image/page2_bg.png')

env.sass
这是一个自动生成的文件

$imgHost: 'http://test.bolo.me'

home.jade

p 这只是一个jade测试，注意缩进，写代码时不要打瞌睡a(href='#{imgHost}/xyz.html')  img(src='#{imgHost}/image/page2_bg.png')

Tips
1.是不是觉得 gulp –env stage 这样的命令不好记容易出错？

在package.json的scripts字段中加入键值对 “a”: “gulp –env stage”。然后运行 npm run a 试试

2.是不是还是觉得麻烦每次push前还要运行 npm run a？

试着用gulp-git,这个自己去npm上扒一下。本人没试过。

1 0