gulp
官网链接
gulp 是自动化构建工具,可以用来压缩文件,合并文件,编译less 编辑sass 等操作
入门
全局安装:
npm i gulp@3.9.1 -g
gulp -v # 测试是否安装成功
npm i gulp@3.9.1 --save-dev # 因为在上线后是不需要这个包的,所以将这个项目安装在开发依赖
- 局部安装gulp要和全局安装的gulp版本保持一致
快速上手
ulp规定任务要写在一个叫做glupfile.js的文件中,在这个文件中用来配置所有任务。
-
新建一个 glupfile.js文件
-
新建一个gulp
// 这个gulp是一个对象,gulp提供了很多接口,都是这个对象的方法。
var glup=require("gulp");
// 注册任务
// ---> 任务名字 a
//----> 任务做什么在函数中处理 ,注意回调函数中需要一个参数;
gulp.task("a",function(cb){
console.log("打印123");
// 说明任务执行完毕;如果没有会报错,但是不影响程序运行
cb()
})
常用api
-
gulp print() 作用相当于管道,传递文件或数据
-
gulp.src(globs[, options]) 方法主要是用来读取目标源文件,所以参数就是一个目标源文件的路径
-
gulp.dest(path[,options]) 用来将数据输出到文件中,所以参数就是目标文件路径
-
gulp.watch() 用来监视某个或某些文件发生变化,可以在变化的时候,执行一个回掉函数,以保证文件中的代码和效果一致
开始
-
准备工作:
-
新建一个gulp 文件;
-
初始化文件 npm init 安装依赖项
-
在gulp 下新建 build 文件夹 作用gulp 输出目录
-
新建Index.js 等文件作为模拟项目开发文件
-
新建glupfile.js 文件为 gulp 配置文件
-
实现一个基本的复制文件效果
var gulp = require('gulp');
// 定义一个任务a
gulp.tast('a',function(cb){
// 读取index.js 文件;
// pipe 传递index.js 文件
// 添加到 build文件
gulp.src('index.js').pipe(gulp.dist('./build'))
cb();
})
-
实现压缩文件
-
安装 npm i gulp-uglify --save
var gulp = require('gulp');
var uglify = require('gulp-uglify');
// 定义一个任务a
gulp.tast('a',function(cb){
// 将读取的文件;传递给uglify() 进行压缩;将压缩结果 传递 build文件保存
gulp.src('index.js').pipe(uglify()).pipe(gulp.dist('./build'));
// 说明任务执行完毕
cb();
})
// 运行 gulp a
-
实现一个实时压缩功能
-
在gulp文件夹下新建一个Index.txt文件;代码写好后,可以通过修改Index.txt文件中内容测试
var uglify = require('gulp-uglify');
var gulp = require('gulp');
// 定义一个任务a
gulp.tast('a',function(cb){
// 将读取的文件;传递给uglify() 进行压缩;将压缩结果 传递 build文件保存
gulp.src('index.text').pipe(uglify()).pipe(gulp.dist('./build'));
// 说明任务执行完毕
cb();
})
gulp.tast('start',function(cb){
// 监听文件index.text变化;并执行a 参二也可以是异步回调函数。这是没用函数
gulp.watch('index.txt',['a'])
cb();
})
- 实现一个对文件配置
var gulp = require('gulp');
gulp.tast('a',function(cb){
// 表示匹配当前目录下所有文件
gulp.src('*.*').pipe(gulp.dist('./build'));
cb();
})
-
实现合并文件压缩文件
-
安装 npm i gulp-concat --save
-
新建 concat文件夹;再创建一些 js 文件
-
在build下新建js文件
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
// 先压缩 后合并
gulp.tast('uglify',['concat'],function(cb){
// 表示匹配当前目录 concat 文件下所有js文件;进行合并到index.js文件中;在压缩;最后放在 build/js下
gulp.src('concat/*.js').pipe(uglify()).pipe(gulp.dist('./build/js'));
cb();
})
gulp.tast('concat',function(cb){
// 表示匹配当前目录 concat 文件下所有js文件;进行合并到index.js文件中;在压缩;最后放在 build/js下
gulp.src('concat/*.js').pipe(concat('index.js')).pipe(uglify()).pipe(gulp.dist('./build/js'));
cb();
})
-
实现 文件重命名
-
安装 npm i gulp-rename --save
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename')
// 定义一个任务a
gulp.tast('uglify',['concat'],function(cb){
gulp.src('concat/*.js').pipe(uglify()).pipe(rename({suffix:".min"})).pipe(gulp.dist('./build/js'))
cb();
})
// 方式2 写法不同
gulp.tast('concat',function(cb){
// 表示匹配当前目录 concat 文件下所有js文件;进行合并到index.js文件中;在压缩;最后放在 build/js下
gulp.src('concat/*.js').pipe(concat('index.js')).pipe(rename({suffix:".min"})).pipe(uglify()).pipe(gulp.dist('./build/js'));
cb();
})
编译sass
准备工作:
- 安装 npm i gulp-sass node-sass --save
var gulp = require('gulp');
var sass= require('gulp-sass');
gulp.task('default',function(cd){
gulp.src('myapp/sass/index.scss')
// 编译sass
.pipe(sass())
.pipe(gulp.dest('myapp/css'))
cb()
})
gulp 有利于前端性能优化–
-
压缩 css js 文件
-
减少http 请求次数 (合并文件;get请求)
-
get 请求;浏览器可以缓存,对于相同请求浏览器会检测到使用缓存
-
问题;不是实时更新数据;解决方式:使用 时间戳
-
减少服务器压力:使用懒加载 cdn加速(花钱)