Gulp小记
安装
总的来说,玩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通配符


Gulp小记的更多相关文章
- gulp小记(无刷新重载样式)
之前在使用sass的时候,使用了一个不错的工具koala,其实它的原理就是监视sass文件的变化,去编译css而gulp也能为我们做这样的事并且更多 使用gulp之前我们要做一些准备工作 1)安装no ...
- gulp入门小记
由于我所在的项目组一直在用gulp构建工具,而我只是在前人搭好的环境下每次运行gulp packJs来打包js,对里面的东西全然不知,刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中,这 ...
- gulp简单使用小记
npm install --save-dev 写入package.json里 var gulp = require('gulp'); var less = require('gulp-less ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
随机推荐
- linux内核分析程序破解实践报告
- 实践——ELF文件格式分析
一.分析文件头 1. 段入口类型定义(/usr/include/elf.h)下面产生的hello是32位的 使用命令#Hexdump –x ELF_1.o 第一行: 前4字节,蓝色部分,是一个魔数,表 ...
- wuziqi
五子棋结对人崔保雪的博客连接http://www.cnblogs.com/nuoxiaomi/ 题目简介 我们实现了一个五子棋的软件,该软件由初始化模块.下棋操作模块.人机对战模块.人人对 ...
- 冒泡,选择,插入,快速排序在Java中的实现
近几天再重新看数据结构的书时,根据各种排序的空间复杂度,发现快速排序所用时间是最短的,也即是说快速排序的速度最快.因此想验证一下具体这几个排序发的快慢,所以在Java中得以实现,同时在运行时,发现虽然 ...
- 第一个Sprint
项目名字:四则运算APP 开发环境:java 团队名称:会飞的小鸟 团队成员:陈志棚 李炫宗 刘芮熔 徐侃 罗伟业 一.经过宿舍世纪讨论后我们剔除了一些不合理的设计,比如网站管理员这一部分在 ...
- JavaScript代码-----位置决定结果
刚学JavaScript的时候,即使照着书上的代码敲一遍,运行的时候,得到的结果要么总是和书上的结果不同,要么是没产生效果.学到后面,才明白到其实程序的代码是没错的,错误的是代码的位置! 首先看下面这 ...
- MYSQL两个数据库字符集保持一致问题
参考这篇文章:https://lzw.me/a/mysql-charset.html 还有一篇官方文档:https://dev.mysql.com/doc/refman/5.7/en/charset. ...
- [书摘]Windows内存管理术语
1. Virtual Address space 虚拟地址空间 一个应用程序能够访问的最大的内存地址空间, 32位的机器上面最大的就是4GB 但是 并不是所有的内存都放到主存里面, 可能放到pagef ...
- 关于Laravel中使用response()方法调用json()返回数据unicode编码转换的问题解决
在网上找了好久没有找到,之后一步一步测试,发现了Laravel还是很强大的,解决方案如下: public function response(){ // 返回json数据 $data = [ 'err ...
- python之OrderedDict类
# OrderedDict类使用举例 # OrderedDict类的使用与字典相似,不同的是OrderedDict类会记录键值对的添加顺序 from collections import Ordere ...