gulp入门学习
一、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入门学习的更多相关文章
- gulp入门学习教程(入门学习记录)
前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...
- gulp入门学习实例
好久都没有更新博客了,每天繁忙的工作,下班之后都不想开设备了.前段时间有幸学习了一下gulp这款构建工具,现在和大家分享一下. 为什么使用Gulp Gulp基于Node.js的前端构建工具,通过Gul ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- Gulp入门与解惑
Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...
- scss入门学习(一)
sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
随机推荐
- 34.Spring-Aop.md
http://blog.csdn.net/bigtree_3721/article/details/50759843 目录 [toc] --- 1.概念 1.1概念 AOP是Spring提供的关键特性 ...
- 一起学makefile
Unix.Linux必学知识哈哈,网上看到一哥们写得挺好挺详细的,直接复制地址就分享哈哈哈. 跟我一起写 Makefile(一) 概述 跟我一起写 Makefile(二) make是如何工作的 跟我一 ...
- ASP.NET MVC 缓存使用示例
应该说,缓存的设计是一门较为复杂的学问,主要考虑的问题包括:要不要缓存?要缓存哪些数据?要缓存多少数据?要缓存多久?如何更新缓存(手动还是自 动)?将缓存放在哪里?本文将以较为通俗易懂的方式,来看一看 ...
- ext之关键字mixins、statics、require
1.mixins 说明:类似于面向对象中的多继承 <script type="text/javascript"> Ext.onReady(function () { / ...
- 深入Java虚拟机读书笔记第二章平台无关性
Java的体系结构对平台无关的支持 Java平台 Java的体系结构通过几种途径支持Java程序的平台无关性,其中主要是通过Java平台自己.Java平台扮演一个运行时Java程序与其下的硬件和操作系 ...
- java Html2Image 实现html转图片功能
//java Html2Image 实现html转图片功能 // html2image HtmlImageGenerator imageGenerator = new HtmlImageGenera ...
- facebook分块加载,页面优化,BigPipe,简单实例
<!DOCTYPE html><html><head><meta charset=”utf-8″><title>BigPipe Demo 3 ...
- 转:为什么要使用NoSQL
为什么要使用NoSQL NoSQL在2010年风生水起,大大小小的Web站点在追求高性能高可靠性方面,不由自主都选择了NoSQL技术作为优先考虑的方面.今年伊始,InfoQ中文站有幸邀请到凤凰网的孙立 ...
- 2014年基于Raspberry Pi的5大项目
2014年基于Raspberry Pi的5大项目 Raspberry Pi(即树莓派)是一款基于Linux系统(Debian.ArchLinux)的单板机计算机,它只有一张信用卡大小,可用于电子表 ...
- jps(JVM Process Status)
功能 列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在类)的名称,以及这些进程的本地虚拟机的唯一ID(LVMID,Local Virtual Machin ...