安装

总的来说,玩gulp的流程是这样的:

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1.安装node.js https://nodejs.org/en/download/

选择对应系统的版本,next、next...安装

2.打开cmd,输入以下指令,全局安装gulp

npm install gulp -g

3.项目安装gulp

npm install gulp --save-dev

安装一些gulp插件

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache gulp-less del --save-dev

--save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。

又或者在packjson.json加上gulp和一些gulp插件,然后跑npm install

常用插件:

sass的编译(gulp-ruby-sass)

自动添加css前缀(gulp-autoprefixer)

压缩css(gulp-minify-css)

js代码校验(gulp-jshint)

合并js文件(gulp-concat)

压缩js代码(gulp-uglify)

压缩图片(gulp-imagemin)

自动刷新页面(gulp-livereload)

图片缓存,只有图片替换了才压缩(gulp-cache)

更改提醒(gulp-notify)

清除文件(del)

4.配置gulpfile.js,用require来调用一些gulp插件

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
gulp.task('xxxxx', function() {
// 自己命名一些task来跑
});

之后跑任务可以跑

gulp xxxxx

来跑自定义任务

跑gulp default或者gulp就可以跑默认任务

Gulp Tasks

正常来说一个task是这样写的:

let sass = require('gulp-dass');
gulp.task('name...', function() {
return gulp.src('url....') //取要处理的文件(一些通配符,例如'app/**/*.sass',表示app下全部的sass文件)
.pipe(xxx1.xx1()) //要执行的函数(例如sass(),表示匹配到的文件进行sass编译)
.pipe(xxx2.xx2())
.pipe(gulp.dest('处理后文件保存路径')) //经过上面一系列处理后的文件流送到gulp.dest目的地
})

异步执行task

gulp.task(name[, deps], fn)

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// 做一些事
});

这里先执行数组里面的task,再执行function里面的操作

队列执行

1.同时

gulp.task('name...', function() {
gulp.start(
'task1',
'task2',
'task3',
'task4',
'task5'
);
});

这里会同时执行所有的task,至于哪个task先执行完就不一定了

2.顺序

let runSequence = require('run-sequence');

gulp.task('name...', function() {
runSequence(
'task1',
'task2',
'task3',
'task4',
'task5'
);
});

引入run-sequence插件就可以实现按照队列顺序执行gulp tasks了(先执行完一个再执行下一个)

分文件放Task

当gulpfile.js里面写太多东西的时候,task就变得难于管理,我们就会用 require-dir 来对gulp文件进行管理,详细可以看我fork的GitHub仓库。

https://github.com/amiezhang/gulpStart

gulp的url通配符

例如 app/**/*.scss 表示app下所有的scss文件,**可以表示任何字符串,当然包括了空的字符串了
(一个*和两个*的区别就是,一个星只能表示任意的一个文件夹。两个*则可以表示目录下的所有子目录,二级的,三级的,四级的,N级的,都可以。)
所以这个通配符既可以匹配app/xxx.scss又可以匹配app/xxx1/xxx.scss、app/xxx1/xxx2/xxx.scss、app/xxx1/xxx2/xxx3/xxx.scss....
对比下面俩图就显而易见了:

Gulp小记的更多相关文章

  1. gulp小记(无刷新重载样式)

    之前在使用sass的时候,使用了一个不错的工具koala,其实它的原理就是监视sass文件的变化,去编译css而gulp也能为我们做这样的事并且更多 使用gulp之前我们要做一些准备工作 1)安装no ...

  2. gulp入门小记

    由于我所在的项目组一直在用gulp构建工具,而我只是在前人搭好的环境下每次运行gulp packJs来打包js,对里面的东西全然不知,刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中,这 ...

  3. gulp简单使用小记

    npm install --save-dev 写入package.json里     var gulp = require('gulp'); var less = require('gulp-less ...

  4. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  7. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  8. gulp详细入门教程

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

  9. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

随机推荐

  1. linux内核分析程序破解实践报告

  2. 实践——ELF文件格式分析

    一.分析文件头 1. 段入口类型定义(/usr/include/elf.h)下面产生的hello是32位的 使用命令#Hexdump –x ELF_1.o 第一行: 前4字节,蓝色部分,是一个魔数,表 ...

  3. wuziqi

          五子棋结对人崔保雪的博客连接http://www.cnblogs.com/nuoxiaomi/ 题目简介 我们实现了一个五子棋的软件,该软件由初始化模块.下棋操作模块.人机对战模块.人人对 ...

  4. 冒泡,选择,插入,快速排序在Java中的实现

    近几天再重新看数据结构的书时,根据各种排序的空间复杂度,发现快速排序所用时间是最短的,也即是说快速排序的速度最快.因此想验证一下具体这几个排序发的快慢,所以在Java中得以实现,同时在运行时,发现虽然 ...

  5. 第一个Sprint

    项目名字:四则运算APP 开发环境:java 团队名称:会飞的小鸟 团队成员:陈志棚  李炫宗   刘芮熔  徐侃  罗伟业 一.经过宿舍世纪讨论后我们剔除了一些不合理的设计,比如网站管理员这一部分在 ...

  6. JavaScript代码-----位置决定结果

    刚学JavaScript的时候,即使照着书上的代码敲一遍,运行的时候,得到的结果要么总是和书上的结果不同,要么是没产生效果.学到后面,才明白到其实程序的代码是没错的,错误的是代码的位置! 首先看下面这 ...

  7. MYSQL两个数据库字符集保持一致问题

    参考这篇文章:https://lzw.me/a/mysql-charset.html 还有一篇官方文档:https://dev.mysql.com/doc/refman/5.7/en/charset. ...

  8. [书摘]Windows内存管理术语

    1. Virtual Address space 虚拟地址空间 一个应用程序能够访问的最大的内存地址空间, 32位的机器上面最大的就是4GB 但是 并不是所有的内存都放到主存里面, 可能放到pagef ...

  9. 关于Laravel中使用response()方法调用json()返回数据unicode编码转换的问题解决

    在网上找了好久没有找到,之后一步一步测试,发现了Laravel还是很强大的,解决方案如下: public function response(){ // 返回json数据 $data = [ 'err ...

  10. python之OrderedDict类

    # OrderedDict类使用举例 # OrderedDict类的使用与字典相似,不同的是OrderedDict类会记录键值对的添加顺序 from collections import Ordere ...