自动构建工具Gulp

摘要:

   gulp与grunt一样,都是自动构建工具。和grunt相比它更突出一个流的概念,任务是一个接一个执行的。今天就分享如何用gulp做自动化。

安装:

  gulp也是基于node环境,所以安装gulp之前你需要安装node.js。

   npm install -g gulp

只要在命令窗口中执行上面一行命令就完成安装,这样安装的是全局安装。在项目中一般是通过package.json中的devDependencies属性来安装。如下:

{
    "name": "",
    "version": "0.0.0",
    "description": "",
    "main": "gulpfile.js",
    "dependencies": {},
    "devDependencies": {
        "gulp": "~3.5.6"
    },
    "license": "ISC"
}

执行npm install就会将gulp安装到当前项目中。

如何运行:

  安装完gulp之后,需要新建一个gulpfile.js文件,一般是在项目的根目录,与package.json放在一块。那gulpfile.js文件里面到底写什么呢?当然是定义一些任务。如下:

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // 执行任务
});

然后在当前目录中通过命令窗口执行gulp,default里面的任务就会被执行。

配置参数:  

gulp.src(globs[, options])

  加载文件,并将文件以流的方式传到插件中,如下:

gulp.src(‘client/templates/*.jade‘)
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest(‘build/minified_templates‘));

gulp首先会加载client/templates/下的所有jade文件,然后分别传递给jade插件、minify插件,然后输出到build/minified_templates中。

globs

  类型:String,Array

  文件或者是路径,多个文件以数组的形式。

options

  类型:Object

  gulp通过options将配置参数传递给node

options.buffer

  类型:bool

  默认值: false

  是否将文件以流的方式返回,false设置文件内容以流的方式读取,并且不缓存,对于大文件设置缓存将是非常有用的。

options.read

  类型:bool

  默认值:true  

  设置是否读取文件,如果设置false将永远不读取文件

options.base

  类型: String

  设置输出文件的根目录,如下:

gulp.src(‘client/js/**/*.js‘) // Matches ‘client/js/somedir/somefile.js‘ and resolves `base` to `client/js/`
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // Writes ‘build/somedir/somefile.js‘

gulp.src(‘client/js/**/*.js‘, { base: ‘client‘ })
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // Writes ‘build/js/somedir/somefile.js‘

gulp.dest(path[, options])

  输出文件,可以输出到不同目录下,如果目录不存在就创建,如下:

gulp.src(‘./client/templates/*.jade‘)
  .pipe(jade())
  .pipe(gulp.dest(‘./build/templates‘))
  .pipe(minify())
  .pipe(gulp.dest(‘./build/minified_templates‘));

path

  类型: String,Function

  设置输出文件的路径

options.cwd

  类型: String

  默认值: process.cwd()

  输出的文件夹,只有当路径为相对路径时才起作用

options.mode

  类型:String

  默认值:0777

  设置输出文件的权限

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

定义一个任务,如下:

gulp.task(‘somename‘, function() {
  // Do stuff
});

name

任务名,调用任务是只需要gulp.run(任务名)

deps

  类型:Array

  执行当前任务所需要依赖的任务,被依赖的任务会在当前任务执行之前执行。注意异步任务

fn

  需要执行的任务都定义在此处

异步执行任务:

使用回调函数

// run a command in a shell
var exec = require(‘child_process‘).exec;
gulp.task(‘jekyll‘, function(cb) {
  // build Jekyll
  exec(‘jekyll build‘, function(err) {
    if (err) return cb(err); // return error
    cb(); // finished task
  });
});

返回一个文件流

gulp.task(‘somename‘, function() {
  var stream = gulp.src(‘client/**/*.js‘)
    .pipe(minify())
    .pipe(gulp.dest(‘build‘));
  return stream;
});

使用promise

var Q = require(‘q‘);

gulp.task(‘somename‘, function() {
  var deferred = Q.defer();

  // do async stuff
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

注意任务依赖关系,下面是一个例子:

var gulp = require(‘gulp‘);

// takes in a callback so the engine knows when it‘ll be done
gulp.task(‘one‘, function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task(‘two‘, [‘one‘], function() {
    // task ‘one‘ is done now
});

gulp.task(‘default‘, [‘one‘, ‘two‘]);

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

监听文件,当文件发生变化时,定义的任务将会被执行。如下当js文件发生改变时会触发change事件。

var watcher = gulp.watch(‘js/**/*.js‘, [‘uglify‘,‘reload‘]);
watcher.on(‘change‘, function(event) {
  console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
});

或者:

gulp.watch(‘js/**/*.js‘, function(event) {
  console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
});

  

实例:

下面是一个简单的例子,实现js、css的压缩合并。

package.json安装模块

{
    "name": "",
    "version": "0.0.0",
    "description": "",
    "main": "gulpfile.js",
    "dependencies": {},
    "devDependencies": {
        "gulp": "~3.5.6",
        "gulp-minify-css": "~0.3.0",
        "gulp-uglify": "^1.0.0",
        "gulp-concat": "~2.0.0",
        "gulp-rename": "^1.0.0"
    },
    "license": "ISC"
}

gulpfile.js

var gulp = require(‘gulp‘);

// 加载模块
var
    minifycss = require(‘gulp-minify-css‘), // CSS压缩
    uglify = require(‘gulp-uglify‘),        // js压缩
    concat = require(‘gulp-concat‘),        // 合并文件
    rename = require(‘gulp-rename‘);        // 重命名

// 合并、压缩、重命名css
gulp.task(‘min-styles‘, function() {
  gulp.src([‘./static/css/*.css‘])
    .pipe(concat(‘all.css‘))
    .pipe(gulp.dest(‘./static/build/css/‘))
    .pipe(rename({ suffix: ‘.min‘ }))
    .pipe(minifycss())
    .pipe(gulp.dest(‘./static/build/css‘));
});

// 合并,压缩js文件
gulp.task(‘min-javascripts‘, function() {
  gulp.src(‘./static/js/*.js‘)
    .pipe(concat(‘all.js‘))
    .pipe(gulp.dest(‘./static/build/js‘))
    .pipe(rename({ suffix: ‘.min‘ }))
    .pipe(uglify())
    .pipe(gulp.dest(‘./static/build/js‘));
});

// 定义develop任务发布或者运行时使用
gulp.task(‘develop‘,function(){
  gulp.run(‘min-styles‘,‘min-javascripts‘);
});

// gulp命令默认启动的就是default
gulp.task(‘default‘, function() {

  // 监听.css文件,一旦有变化,立刻调用min-styles任务执行
  gulp.watch(‘./css/*.css‘, [‘min-styles‘]);

  gulp.run(‘develop‘);
});

在gulpfile.js文件目录下,通过命令窗执行gulp,则default任务就会执行。

时间: 2024-10-20 04:52:31

自动构建工具Gulp的相关文章

前端自动构建工具-gulp

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 在gulp安装之前,必须先要有node的环境,因为gulp.js是基于node.js的.  所以先来安装node (如果你已经有node环境了就可以跳过此布)  node安装 ? Node.js安装包及源码下载

(转载)前端构建工具gulp使用

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原

构建工具-Gulp 相关知识

layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- Gulp- 简介 Automate and enhance your workflow | 用自动化构建工具增强你的工作流程 Gulp 是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

记学习前端构建工具gulp的过程,略心酸

初学前端的时候就听过友人说,前端不好学,很多软件都是要自己下载安装插件的,当时是很不以为然的,不就是下载几个软件外加安装插件吗?!怎么会很难呢!后面才发现自己真的错了. 今天刚好准备好好看看前端构建工具gulp的使用,于是乎就各种上网查资料.刚开始的时候有点摸不着头脑,这个东西不是一个软件,拿来就用,需要自己配置环境,自己根据需求安装package,完全是自己DIY的一个工具. 下面就把整个安装过程,记录下来,方便以后查看吧. 先明确几个概念:1.gulp是基于node.js环境下工作的:2.命

项目管理及自动构建工具Maven

项目管理及自动构建工具Maven 一.Maven安装.目录结构.cmd命令1.下载安装apache-maven-3.2.3-bin.zip下载:http://maven.apache.org/download.cgi 安装:解压,配置环境变量M2_HOME=D:\Idea\config\apache-maven-3.2.3Path+=D:\Idea\config\apache-maven-3.2.3\bin 通过执行 mvn -v 可以查看当前版本号 C:\Users\yuki>mvn -v A

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

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

自动化构建工具gulp

1.优点 1.1 易于使用 通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理 1.2 构建快速 利用node.js流的威力,你可以快速构建项目并减少频繁的IO操作 1.3 插件高质 gulp严格的插件指南确保插件如你期望的那样简洁高质的工作 1.4 易于学习 通过最少的API,掌握gulp毫不费力,构建工作尽在掌握:如同一系列流管道 2.gulp使用说明 2.1 安装 在工程根目录下进入cmd 初始化npm,在项目根目录下新建package.json文件 npm init 全局