引言

gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,gulp 借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.

 

一、安装Gulp

gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前要先安装node.js环境。

打开Nodejs官网,点击硕大的绿色“install”按钮,可以检测一下安装的Node和npm版本:

然后全局安装gulp:

 

npm install -g gulp

同样安装完之后,可以检测gulp的版本:

全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:

 

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev

 

npm install gulp --save-dev

--save:将保存配置信息至package.jsonpackage.json是nodejs项目配置文件。package.json是一个普通json文件,不能添加任何注释。参看 http://www.zhihu.com/question/23004511 
); 
-dev/-dep:保存至package.json的devDependencies节点,不指定-dev/dep将保存至dependencies节点;

安装Gulp之后,可以运行npm init初始化package.json文件:

需要注意的是,name是不能包含大写字母的:

初始化之后,需要在项目的根目录下建立gulpfile.js文件,文件名不能更改:

 

var gulp = require('gulp');

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

console.log('hello gulp');

});

默认任务将被运行,向控制台输出hello gulp。如果需要运行单个任务, 使用 gulp taskname命令(上述等效于gulp default)。

也可以看gulp官方的 Getting Started

 

二、Gulp API

gulp在git上只介绍了四个API:taskdestsrcwatch,除此之外,gulp还提供了一个run方法。

1.gulp.src(globs[, options]) 
src()方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件.

参数 说明
globs 需要处理的源文件匹配符路径
options 有3个属性buffer、read、base

globs的文件匹配说明: 
“src/a.js”:指定具体文件; 
“*”:匹配所有文件 例:src/*.js(包含src下的所有js文件); 
“**”:匹配0个或多个子文件夹 例:src/**/*.js(包含src的0个或多个子文件夹下的js文件); 
“{}”:匹配多个属性 例:src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件); 
“!”:排除文件 例:!src/a.js(不包含src下的a.js文件);

 

var gulp = require('gulp'),

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

//gulp.src('test/style.css')

gulp.src(['css/**/*.css','!css/{extend,page}/*.css'])

.pipe(gulp.dest('./css'));

});

options的三个属性说明: 
options.buffer: 类型:Boolean 默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用; 
options.read: 类型:Boolean 默认:true 设置false,将不执行读取文件操作,返回null; 
options.base: 类型:String 设置输出路径以某个路径的某个组成部分为基础向后拼接

2.gulp.dest(path[, options]) 
dest()方法是指定处理完后文件输出的路径;

参数 说明
path 指定文件输出路径,或者定义函数返回文件输出路径亦可
options 有2个属性cwd、mode

options.cwd 
Type: String Default: process.cwd() 
cwd for the output folder, only has an effect if provided output folder is relative. 
options.mode 
Type: String Default: 0777 
Octal permission string specifying mode for any folders that need to be created for output folder.

修改之前的gulpfile.js的内容如下:

 

var gulp = require('gulp');

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

gulp.src('./js/test.js')

.pipe(gulp.dest('./build'));

});

运行结果如下图:

利用gulp.dest('./build')将新建的test.js文件移动到了build目录,对比前后两次的ls -al命令,dest()会自动创建目录。

3.gulp.task(name[, deps], fn) 
该方法用于定义一个gulp任务。

参数 说明
name 任务名称,不能包含空格
deps 该任务依赖的任务,依赖任务的执行顺序跟在deps中声明的顺序一致
fn 该任务调用的插件操作

再次修改gulpfile.js文件,定义一个任务列表

 

var gulp = require('gulp');

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

console.log('task1 done');

});

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

console.log('task2 done!');

});

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

console.log('task3 done');

});

gulp.task('end',['task1','task3','task2'],function(){

console.log('end done');

});

运行结果:

4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 
watch()方法是用于监听文件变化,文件一修改就会执行指定的任务.

参数

说明

glob

需要处理的源文件匹配符路径

opts

具体参看https://github.com/shama/gaze

tasks

需要执行的任务的名称数组

cb(event)

每个文件变化执行的回调函数

每当监视的文件发生变化时,就会调用cb函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息: 
type:属性为变化的类型,可以是added,changed,deleted 
path:属性为发生变化的文件的路径

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

//do something

});

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

//do something

});

gulp.watch('js/**/*.js', ['uglify','reload']);

watcher.on('change', function(event) {

console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');

});

// same as

gulp.watch('js/**/*.js', function(event){

//变化类型 added为新增,deleted为删除,changed为改变

console.log(event.type);

//变化的文件的路径

console.log(event.path);

});

5.gulp.run() 
gulp模块的run()方法,表示要执行的任务。可能会使用单个参数的形式传递多个任务。注意:任务是尽可能多的并行执行的,并且可能不会按照指定的顺序运行.

修改之前的gulpfile.js文件中的end任务:

 

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

gulp.run('task1','task3','task2');

});

运行结果:

 

三、gulp常见插件

1.gulp-uglify 
使用gulp-uglify压缩javascript文件,减小文件大小。

利用npm先安装gulp-uglify:

 

npm install --save-dev gulp-uglify

安装之后,在gulpfile.js中引入:

 

var gulp = require('gulp'),

uglify = require("gulp-uglify");

gulp.task('minify-js', function () {

gulp.src('js/*.js') // 要压缩的js文件

.pipe(uglify())

.pipe(gulp.dest('dist/js')); //压缩后的路径

});

###压缩多个文件

var gulp = require('gulp'),

uglify = require('gulp-uglify');

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

//多个文件以数组形式传入

gulp.src(['src/js/index.js','src/js/detail.js'])

.pipe(uglify())

.pipe(gulp.dest('dist/js'));

});

var gulp = require('gulp'),

uglify= require('gulp-uglify');

##匹配符“!”,“*”,“**”,“{}”

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

//压缩src/js目录下的所有js文件

//除了test1.js和test2.js(**匹配src/js的0个或多个子文件夹)

gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])

.pipe(uglify())

.pipe(gulp.dest('dist/js'));

});

2.gulp-rename 
用来重命名文件流中的文件。用gulp.dest()方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用gulp-rename插件来改变文件流中的文件名。

 

npm install --save-dev gulp-rename

简单运用:

var gulp = require('gulp'),

rename = require('gulp-rename'),

uglify = require("gulp-uglify");

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

gulp.src('js/jquery.js')

.pipe(uglify()) //压缩

//会将jquery.js重命名为jquery.min.js

.pipe(rename('jquery.min.js'))

.pipe(gulp.dest('js'));

});

3.gulp-minify-css 
压缩css文件时并给引用url添加版本号避免缓存:

 

npm install --save-dev gulp-minify-css

简单运用:

 

var gulp = require('gulp'),

cssmin = require('gulp-minify-css');

//确保已本地安装gulp-make-css-url-version [npm install gulp-make-css-url-version --save-dev]

cssver = require('gulp-make-css-url-version');

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

gulp.src('src/css/*.css')

.pipe(cssver()) //给css文件里引用文件加版本号(文件MD5)

.pipe(cssmin())

.pipe(gulp.dest('dist/css'));

});

4.gulp-htmlmin 
使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。

 

npm install --save-dev gulp-htmlmin

简单使用:

 

var gulp = require('gulp'),

htmlmin = require('gulp-htmlmin');

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

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//压缩HTML

//省略布尔属性的值 <input checked="true"/> ==> <input />

collapseBooleanAttributes: true,

//删除所有空格作属性值 <input id="" /> ==> <input />

removeEmptyAttributes: true,

//删除<script>的type="text/javascript"

removeScriptTypeAttributes: true,

//删除<style>和<link>的type="text/css"

removeStyleLinkTypeAttributes: true,

minifyJS: true,//压缩页面JS

minifyCSS: true//压缩页面CSS

};

gulp.src('src/html/*.html')

.pipe(htmlmin(options))

.pipe(gulp.dest('dist/html'));

});

5.gulp-concat 
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了.

 

npm install --save-dev gulp-concat

简单使用:

 

var gulp = require('gulp'),

concat = require("gulp-concat");

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

gulp.src('js/*.js') //要合并的文件

.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"

.pipe(gulp.dest('dist/js'));

});

其它常用插件:

gulp-imagemin:压缩图片文件 
gulp-jshint:侦测javascript代码中错误和潜在问题的工具

相关文章:gulp plugins 插件介绍

相关链接:

Gulp 
Gulp API 
Gulp Plugins 
Get Started 
npmjs 
nodejs

gulp不完全入门教程的更多相关文章

  1. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  2. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  3. gulp详细入门教程(转载)

    本文转载自: gulp详细入门教程

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

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  5. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  6. Gulp资料大全:入门、插件、脚手架、包清单

    awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程. 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将 ...

  7. 观看杨老师(杨旭)Asp.Net Core MVC入门教程记录

    观看杨老师(杨旭)Asp.Net Core MVC入门教程记录 ASP.NET Core MVC入门 Asp.Net Core启动和配置 Program类,Main方法 Startup类 依赖注入,I ...

  8. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  9. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

随机推荐

  1. gearman学习笔记1

    1.简介       gearman是一个分布式开发框架,适合处理一些必须处理但是不影响主流程的操作,比如保存日志.发送邮件.缩略图片等.最早是基于perl语言的,2008年发布的时候改为C++语言开 ...

  2. sqlserver 存储过程 修改

    CREATE PROCEDURE [dbo].[UpdateMessage] @strTable varchar(), --要修改的表 @strColumn varchar(),--要修改的列名(如果 ...

  3. listbox控件使用

    1. 属性列表: SelectionMode    组件中条目的选择类型,即多选(Multiple).单选(Single)    Rows             列表框中显示总共多少行    Sel ...

  4. Simple Games Using SpriteKit

    p.p1 { margin: 0.0px 0.0px 12.0px 0.0px; line-height: 14.0px; font: 12.0px Times; color: #000000 } s ...

  5. Xamarin使用ListView开启分组视图Cell数据展示bug处理

    问题描述 Xamarin使用IsGroupingEnabled="true"之后再Cell操作就会出现数据展示bug,数据不刷新的问题,如下图所示: 点击取消的是其他钢厂,但Vie ...

  6. 插值查找C++

    和上一篇折半查找很类似,只有四则运算不一样,思想类似. 只是在插值查找的过程中,考虑了查找键的值. #include <iostream> using namespace std; //需 ...

  7. BZOJ 4818 SDOI2017 序列计数

    刚出炉的省选题,还是山东的. 自古山东出数学和网络流,堪称思维的殿堂,比某地数据结构成风好多了. 废话不说上题解. 1.题面 求:n个数(顺序可更改),值域为[1,m],和为p的倍数,且这些数里面有质 ...

  8. linux编译php gd扩展

    1 安装gd的依赖包 yum -y install gd gd2 gd-devel gd2-devel zlib freetype 2 安装jpeg: wget http://www.ijg.org/ ...

  9. python科学计算_numpy_ndarray

    ndarray:n-dimensional array object,即多维数组对象,是python自带的array对象的扩展,array对象和list对象的区别是array对象的每一个元素都是数值, ...

  10. Nginx编译配置介绍

    源码包 nginx-1.6.2.tar.gz --help 使用帮助 --prefix=PATH Nginx安装路径,如果没有指定,默认为/usr/local/nginx. --sbin-path=P ...