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. ...
随机推荐
- 在C#程序中模拟发送键盘按键消息
using System.Runtime.InteropServices; 引入键盘事件函数 [DllImport("user32.dll")]public static exte ...
- solr索引库的创建
solr索引库的创建 一.找到你安装的[solrhome]目录(我的是这个) 二.进入该目录 三.选择其中任意一个索引库复制一份到该目录下并更名为要创建的索引库名称 四.进入[myindex]目录下, ...
- [转载] Linux内存管理之mmap详解
转载自http://blog.chinaunix.net/uid-26669729-id-3077015.html 一. mmap系统调用 1. mmap系统调用 mmap将一个文件或者其它对象映射进 ...
- [转载] Linux五种IO模型
转载:http://blog.csdn.net/jay900323/article/details/18141217 Linux五种IO模型性能分析 目录(?)[-] 概念理解 Lin ...
- Android基础Activity篇之什么是Activity?
Activity是Android的四大组件之一,也是平时我们用到最多的一个组件,可以用来显示View.官方的说法是Activity一个应用程序的组件,它提供一个屏幕来与用户交互,以便做一些诸如打电话. ...
- 【Java】单词倒序输出
如何将一段单词倒序输出?把"Hello Java Hello China"变成"China Hello Java Hello"? 看起来好像很简单,只需要把字符 ...
- iBatis & myBatis & Hibernate 要点记录
iBatis & myBatis & Hibernate 要点记录 这三个是当前常用三大持久层框架,对其各自要点简要记录,并对其异同点进行简单比较. 1. iBatis iBatis主 ...
- debounce去弹跳
通过返回闭包,来共用timer定时器,通过定时器的清除和设置来实现每次触发后重新计时. /** * * @param fn {Function} 实际要执行的函数 * @param delay {Nu ...
- ChatterBot之使用mongodb 03
上一篇我们已经搭建好了mongodb环境,本篇为简单示例. 废话不多说先上代码然后开始讲解; !!!别忘了打开你的mongdb服务!!!,如果没有mongodb请看上篇如何安装mongodb; # - ...
- zzuli 2131 Can Win dinic+链式前向星(难点:抽象出网络模型+建边)
2131: Can Win Time Limit: 1 Sec Memory Limit: 128 MB Submit: 431 Solved: 50 SubmitStatusWeb Board ...