gulp基础教学

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加速（花钱）