gulp的基本用法
这几天简单的研究了一下gulp的用法,gulp对于初学者来说还是很友好的。
官方给出gulp的优点如下:
1.通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
2.Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
3.利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
4.通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,(虽然在涉及到Sass问题都让我并不愉快)而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。
第一步:gulp的安装配置
1.安装node 确定是否安装了node (确认是否安装 node -v)
2.安装gulp npm install -g gulp,创建一个工作目录
3.npm init 初始化
4.npm install gulp —save-dev 添加到项目依赖
5.配置gulpfile.js var gulp = require('gulp');
第二步:创建任务
gulp.task(‘hello’,function(){ … });
第三步:连接多个任务
gulp.task(‘taskName’,[‘task1’,’task2’]);
Gulp基础知识点
gulp.src() 找到要处理的文件
通配符路径匹配示例:
“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文件)
gulp.pipe()通过管道去处理文件(在管道里可以去指定功能)
gulp.dest()将处理好的文件放在指定的地方
gulp.watch() 用于监听文件变化,文件一修改就执行指定任务
插件使用
1、下载插件,添加到依赖项;
npm install 插件名 --save-dev
2、加载插件 gulp.require('插件名称');
编译sass:gulp-sass
.pipe(sass({ outputStyle: 'expanded' }))
创建本地服务:gulp-connect
gulp.task('server',function(){
connect.server({
root:'dist'
})
});
实时刷新:liveReload
gulp.task('watch',function(){
gulp.watch('index.html',['copy-html']);//一旦index.html变化,执行copy-html
gulp.watch('src/sass/*.scss',['sass']);
});
gulp.task('copy-html', function () {
gulp.src('index.html')
.pipe(gulp.dest('dist'))//扔到disk里
.pipe(connect.reload());//然后重新加载
});
gulp.task('server',function(){
connect.server({
root:'dist',
livereload:true//实时刷新
})
});
合并文件
gulp.task('concat',function(){
gulp.src('src/js/*.js').pipe(concat('index.js'))
.pipe(gulp.dest('dist/js'))
});
最小化:
最小化js:gulp-uglify
最小化css:gulp-minify-css
最小化图片:gulp-imagemin
重命名:
文件重命名gulp-rename
.pipe(rename('index.min.js'))
gulp的基本用法的更多相关文章
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 前端打包构建工具gulp快速入门
因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...
- gulp如何使用
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- Gulp如何编译sass
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...
- 【前端】在Gulp中使用Babel
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...
- gulp入门教程(详细注解)
本文转载自http://www.ydcss.com/archives/18 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很 ...
- gulp详细入门教程-gulp demo download
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- 是什么时候开始学习gulp了
转自:http://www.ydcss.com/archives/18 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重 ...
- [转]gulp构建前端工程
摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...
随机推荐
- Gmail,QMail,163邮箱的 IMAP/SMTP/POP3 地址
我们在客户端设置邮箱或者使用 PHPMailer 发送邮件的时候,我们都会去查找这些邮箱的 IMAP/SMTP/POP3 地址,这里就列出 Gmail, QMail, 163邮箱这三个常用邮箱的这些地 ...
- CLR类型设计之参数传递
写到这篇文章的时候,笔者回忆起来以前的开发过程中,并没有注意参数的传递是以值传递还是引用传递的,也是第一次了解到可变参数params,常用的不一定就代表理解,可能只是会用.接下来我们就一起回忆一下关于 ...
- JavaScript学习笔记(二)——字符串
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- 2017-11-22 Intall Ubuntu Log
重启之后进入不了系统,安装工具check defect也不好用(问题尚不清楚),决定重做系统 直接用u盘(Universal_USB_Installer制作的安装工具,之前用都没有问题)安装,前面一起 ...
- 关于SQLServer数据库中字段值为NULL,取出来该字段放在DataTable中,判断datatable中该字段值是否为NULL的三种方法
1. DataTable dt; //假设字段为name, dt已经保存了数据dt.rows[0]["name"] == ...
- python 面对post分页爬虫
分享一则对于网抓中面对post请求访问的页面或者在分页过程中需要post请求才可以访问的内容! 面的post请求的网址是不可以零参访问网址的,所以我们在网抓的过程中需要给请求传表单数据,下面看一下网页 ...
- [线段树]P1047 校门外的树
题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……,L,都种 ...
- 1.0-springboot的java配置方式
1.创建User实体类. @Data public class User { private String username; private String password; private Int ...
- work 2013-07-19
今天,在现场进行了数据库的优化,将数据库的日志截断和压缩了 use 测试库backup log 测试库 with no_logdbcc shrinkfile (测试库_Data,1)dbcc shri ...
- TreeSet(一)--排序
TreeSet(一) 一.TreeSet定义: 与HashSet是基于HashMap实现一样,TreeSet同样是基于TreeMap实现的. 1)TreeSet类概述 ...