gulp 基本使用

Mbbsp

于 2023-07-14 09:56:49 发布

阅读量103

点赞数 1

文章标签： gulp rust node.js

本文链接：https://blog.csdn.net/Mbbsp/article/details/131717117

版权

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()

})