一、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. 34.Spring-Aop.md

    http://blog.csdn.net/bigtree_3721/article/details/50759843 目录 [toc] --- 1.概念 1.1概念 AOP是Spring提供的关键特性 ...

  2. 一起学makefile

    Unix.Linux必学知识哈哈,网上看到一哥们写得挺好挺详细的,直接复制地址就分享哈哈哈. 跟我一起写 Makefile(一) 概述 跟我一起写 Makefile(二) make是如何工作的 跟我一 ...

  3. ASP.NET MVC 缓存使用示例

    应该说,缓存的设计是一门较为复杂的学问,主要考虑的问题包括:要不要缓存?要缓存哪些数据?要缓存多少数据?要缓存多久?如何更新缓存(手动还是自 动)?将缓存放在哪里?本文将以较为通俗易懂的方式,来看一看 ...

  4. ext之关键字mixins、statics、require

    1.mixins 说明:类似于面向对象中的多继承 <script type="text/javascript"> Ext.onReady(function () { / ...

  5. 深入Java虚拟机读书笔记第二章平台无关性

    Java的体系结构对平台无关的支持 Java平台 Java的体系结构通过几种途径支持Java程序的平台无关性,其中主要是通过Java平台自己.Java平台扮演一个运行时Java程序与其下的硬件和操作系 ...

  6. java Html2Image 实现html转图片功能

    //java Html2Image 实现html转图片功能 // html2image  HtmlImageGenerator imageGenerator = new HtmlImageGenera ...

  7. facebook分块加载,页面优化,BigPipe,简单实例

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>BigPipe Demo 3 ...

  8. 转:为什么要使用NoSQL

    为什么要使用NoSQL NoSQL在2010年风生水起,大大小小的Web站点在追求高性能高可靠性方面,不由自主都选择了NoSQL技术作为优先考虑的方面.今年伊始,InfoQ中文站有幸邀请到凤凰网的孙立 ...

  9. 2014年基于Raspberry Pi的5大项目

    2014年基于Raspberry Pi的5大项目   Raspberry Pi(即树莓派)是一款基于Linux系统(Debian.ArchLinux)的单板机计算机,它只有一张信用卡大小,可用于电子表 ...

  10. jps(JVM Process Status)

    功能   列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在类)的名称,以及这些进程的本地虚拟机的唯一ID(LVMID,Local Virtual Machin ...