一、gulp简介

gulp是一个自动化构建工具。在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率。

二、安装gulp

在安装gulp之前先要确认已经正确安装了node.js,然后在项目根目录下安装gulp:

$ npm install gulp

三、gulp函数接口介绍

在编写gulp配置文件gulpfile之前,需要先了解常见的函数接口:

1. gulp.src()

gulp的工作过程是这样的,首先通过gulp.src()获取我们想要处理的文件的stream(文件流);然后,通过.pipe方法将stream导入到引用的gulp插件中进行相应的处理;最后通过gulp.dest()方法将处理后的流写入到文件中。

从gulp工作过程中可以看到,gulp.src()主要用来从文件中获取文件流。gulp.dest()函数原型如下:

gulp.src(globs[, options]

globs是文件的匹配路径和匹配形式。下面列举了部分常用的匹配形式:

(1)js/test.js    //精确匹配文件

(2)js/*.js        //匹配js目录下所有后缀为.js的文件

(3)js/**/*.js   //匹配js目录及其子目录下所有后缀为.js的文件

(4)!js/test.js //从匹配结果中排出js目录下的test.js文件

2. gulp.task()

gulp.task()函数用来构建任务。函数原型为:

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

name是所构建的任务名称。fn是任务所要执行的函数,gulp具体的工作过程是在fn中进行的。示例:

var webpack = require('gulp-webpack');
var config = require('./webpack.config');
gulp.task('webpack', function() {
return webpack(config)
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});

上面的代码是我在项目中使用的部分。该部分是webpack与gulp的联合使用,第一次看到别人用时,感觉发现了新大陆。task参数function中webpack会首先执行同一目录下的webpack.config.js配置文件,对代码进行模块打包;然后,返回打包后的所有文件的文件流;文件流通过pipe进入到uglify插件后进行压缩;最后,文件流通过gulp.dest写入到设置的目录下。

3.gulp.dest()

gulp.dest()是对文件流的输出进行设置。函数原型为:

gulp.dest(path[, options])

path是文件输出路径设置。注意:path只能生成文件的目录,不能生成文件的名称,不能生成文件的名称,不能生成文件的名称,不能生成文件的名称,重要的事说四遍。而最终生成的文件的名称是由gulp.src传入的文件名决定。下面会由示例的。

文件最终生成的路径也需要注意:

(1)如果gulp.src(path)中的path带有通配符,则生成的路径由gulp.dest(path_dest)中的path_dest代替path通配符前面的部分组成。例如:

gulp.src('js/*/test.js')
//假设匹配到的文件为js/source/test.js
.pipe(gulp.dest('dist')); //最终生成的文件为 dist/source/test.js

(2)如果gulp.src(path)中的path没有带通配符,则生成的路径由gulp.dest(path_dest)中的path_dest与gulp.src引入的文件名组成。例如:

gulp.src('js/test.js')
.pipe(gulp.dest('dist')); //最终生成的文件为 dist/test.js

四、常用的gulp插件

1. gulp-uglify插件

引入:

var uglify = require('gulp-uglify');

作用:对js文件流进行压缩。

gulp.task('server_test', function() {
return gulp.src(server/app.js)
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});

上面代码中的uglify()会对流过它的js数据流进行压缩,然后有gulp.dest写入到js目录下。

2. gulp-less插件

引入:

var less = require('gulp-less');

作用:对less文件流进行压缩

gulp.task('server_test', function() {
return gulp.src(server/device.less)
.pipe(less())
.pipe(gulp.dest('./dist/less'));
});

上面代码中的less()会对流过它的less数据流进行压缩,然后有gulp.dest写入到less目录下。

3. gulp-minify-css插件

引入:

var minifyCSS = require('gulp-minify-css');

作用:对css文件流进行压缩

gulp.task('server_test', function() {
return gulp.src(server/control.css)
.pipe(minifyCSS())
.pipe(gulp.dest('./dist/css'));
});

上面代码中的minifyCSS()会对流过它的css数据流进行压缩,然后有gulp.dest写入到css目录下。

gulp中有很多插件,具体根据需要来选择。

兄弟姐妹们,看完后顶一下,收藏一下吧,深夜写博客累呀!!!

gulp入门学习的更多相关文章

  1. gulp入门学习教程(入门学习记录)

    前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...

  2. gulp入门学习实例

    好久都没有更新博客了,每天繁忙的工作,下班之后都不想开设备了.前段时间有幸学习了一下gulp这款构建工具,现在和大家分享一下. 为什么使用Gulp Gulp基于Node.js的前端构建工具,通过Gul ...

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

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

  4. Gulp入门与解惑

    Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...

  5. scss入门学习(一)

    sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...

  6. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  7. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  8. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  9. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

随机推荐

  1. thinkphp中ajax用户名校验

    ajax实在是太神奇了,刚刚接触,不足之处,请大家指正. 采用Ajax方式进行页面无刷新提示,来检测用户名是否存在. 搭建一个thinkphp的环境,在index.html中,ajax代码如下: &l ...

  2. shell每日发邮件

    LOGFILE="$fank/"`date +"%Y%m%d"`"data"#每日文件 from="abc@123.com&quo ...

  3. CSS 去除浏览器默认 轮廓外框

    在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的. 我们应如何消 ...

  4. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  5. MVC中的路由

    authour: chenboyi updatetime: 2015-05-02 16:10:04 friendly link:   目录 1,思维导图 2,MVC处理机制简图(讲解路由解析) 3,默 ...

  6. poj 2528Mayor's posters

    http://poj.org/problem?id=2528 这个题有个细节,整个区间的长度为10000000,而n最大只有1000,所以我们要进行离散化. #include<cstdio> ...

  7. Expanding Rods

    http://poj.org/problem?id=1 #include<cstdio> #include<cstring> #include<cmath> #in ...

  8. Subway POJ 2502

    题目链接: http://poj.org/problem?id=2502 题目大意: 你刚从一个安静的小镇搬到一个吵闹的大城市,所以你不能再骑自行车去上学了,只能乘坐地铁或者步行去上学.因为你不想迟到 ...

  9. fastjson将bean转成字符串时首字母变小写问题

    一个项目需求要求返回值为JSON格式,且大多数字段是首字母大写,还有些是类似N_TX这样的格式,在输出这样的结果时遇到了问题,由于时间紧,就直接拷贝需要的结果字段建立JavaBean类,本以为最后直接 ...

  10. Generate Parentheses——LeetCode

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...