这几天简单的研究了一下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的基本用法的更多相关文章

  1. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  2. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

  3. gulp如何使用

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  4. Gulp如何编译sass

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...

  5. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  6. gulp入门教程(详细注解)

    本文转载自http://www.ydcss.com/archives/18 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很 ...

  7. gulp详细入门教程-gulp demo download

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  8. 是什么时候开始学习gulp了

    转自:http://www.ydcss.com/archives/18 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重 ...

  9. [转]gulp构建前端工程

    摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...

随机推荐

  1. Gmail,QMail,163邮箱的 IMAP/SMTP/POP3 地址

    我们在客户端设置邮箱或者使用 PHPMailer 发送邮件的时候,我们都会去查找这些邮箱的 IMAP/SMTP/POP3 地址,这里就列出 Gmail, QMail, 163邮箱这三个常用邮箱的这些地 ...

  2. CLR类型设计之参数传递

    写到这篇文章的时候,笔者回忆起来以前的开发过程中,并没有注意参数的传递是以值传递还是引用传递的,也是第一次了解到可变参数params,常用的不一定就代表理解,可能只是会用.接下来我们就一起回忆一下关于 ...

  3. JavaScript学习笔记(二)——字符串

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  4. 2017-11-22 Intall Ubuntu Log

    重启之后进入不了系统,安装工具check defect也不好用(问题尚不清楚),决定重做系统 直接用u盘(Universal_USB_Installer制作的安装工具,之前用都没有问题)安装,前面一起 ...

  5. 关于SQLServer数据库中字段值为NULL,取出来该字段放在DataTable中,判断datatable中该字段值是否为NULL的三种方法

    1. DataTable dt;                               //假设字段为name, dt已经保存了数据dt.rows[0]["name"] == ...

  6. python 面对post分页爬虫

    分享一则对于网抓中面对post请求访问的页面或者在分页过程中需要post请求才可以访问的内容! 面的post请求的网址是不可以零参访问网址的,所以我们在网抓的过程中需要给请求传表单数据,下面看一下网页 ...

  7. [线段树]P1047 校门外的树

    题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……,L,都种 ...

  8. 1.0-springboot的java配置方式

    1.创建User实体类. @Data public class User { private String username; private String password; private Int ...

  9. work 2013-07-19

    今天,在现场进行了数据库的优化,将数据库的日志截断和压缩了 use 测试库backup log 测试库 with no_logdbcc shrinkfile (测试库_Data,1)dbcc shri ...

  10. TreeSet(一)--排序

    TreeSet(一) 一.TreeSet定义:      与HashSet是基于HashMap实现一样,TreeSet同样是基于TreeMap实现的.            1)TreeSet类概述 ...