初识Gulp

Posted 2020-10-10 原易

1.使用准备
首先你的电脑里需要有node环境
全局安装gulp
npm install gulp -g
初始化package.json
npm init
安装版本依赖并安装gulp于项目
npm install
npm install gulp --save-dev

创建两个文件
src文件夹 存放代码
gulpfile.js gulp的入口文件 （名称不可变）

// 引入gulp
var gulp = require(‘gulp‘);
// 常用方法

gulp.task(‘message‘,function(){
return console.log(‘running!‘)
}); // 定义任务 任务名称 、回调函数

gulp.task(‘default‘,function(){
return console.log(‘这是默认的任务!‘)
});// 默认任务 任务名不可变 执行直接gulp即可

// 执行任务 命令行 gulp message

gulp.src //找到需要执行任务的文件

gulp.dest //执行任务的文件的去处

gulp.watch //观察文件是否发生变化
2.开始应用
var gulp = require(‘gulp‘);

 

// 拷贝文件—— 找到需要拷贝的文件借助pipe放入适当的位置 dest会自动创建文件夹
gulp.task(‘copyhtml‘,function(){
gulp.src("src/*.html")//gulp.src 找到需要执行任务的文件（这里是找到src下所有的html文件）
.pipe(gulp.dest("dist"));//pipe数据流处理方法 拿到左边地址的数据 放入右边的地址 gulp.dest 执行任务的文件的去处
});

// 图片压缩——找到需要压缩的图片借助pipe进行压缩，需要用到gulp-imagemin所以我们要先安装它
npm install gulp-imagemin --save-dev
然后用require来引入他
var imagemin = require(‘gulp-imagemin‘);
之后就可以用.pipe调用他的方法
gulp.task("imagemin",function(){
gulp.src("src/images/*")
.pipe(imagemin())//调用的是接收的gulp-imagemin方法
.pipe(gulp.dest("dist/images"));
});

// 压缩js——和压缩图片基本相同
首先引入方法
var uglify = require("gulp-uglify");
然后
gulp.task("minify",function(){
gulp.src("src/js/*.js")
.pipe(uglify())//使用的方法
.pipe(gulp.dest("dist/js"));//放到那里去
});
3.高级应用

 

附上一段sass代码
$bgColor : #cc6677 ;
body{
background: $bgColor;
}

// sass转换为css 需要用到gulp-sass方法我们首先来安装它
npm install gulp-sass --save-dev
然后require引入他
var sass = require("gulp-sass");
之后pipe来调用这个方法
这里值得说的一点是调用方法后可以附加一个事件
.on 发生错误的时候讲错误打印出来
gulp.task("sass",function(){
gulp.src("src/sass/*.scss")
.pipe(sass().on(‘error‘,sass.logError))//如果有错误打印出来
.pipe(gulp.dest("dist/css"));
});

// 代码合并 需要用到gulp-concat方法我们首先来安装它
npm install gulp-concat --save-dev
然后require引入他
var concat = require("gulp-concat");
之后pipe来调用这个方法,我们需要给他确定一个合并后的文件名称
还有很重要的一点我们还可以用pipe引入自定义的方法，从而将方法搭配使用
gulp.task("scripts",function(){
gulp.src("src/js/*.js")
.pipe(concat("main.js"))//合并后的名称
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
})

// 执行多个任务 执行多个任务就需要借助默认任务来实现了
此时我们不再需要他提供回调函数，而是给他传入一个数组，就像这样，将需要执行的任务存放进去，之后我们就可以通过gulp命令直接执行任务了
gulp.task(‘default‘,[
"message",
"copyHtml",
"imagemin",
"sass",
"minify",
"scripts"
]);// 默认任务 任务名不可变 执行直接gulp即可 可执行多个任务

// 监听文件 监听文件就厉害了 我们可以传入需要监听的文件，并规定他发生变化时候执行的任务
gulp.task("watch",function(){
gulp.watch("src/js/*.js",[‘scripts‘]);//监听的文件 发生变化执行的任务
gulp.watch("src/images/*",[‘imagemin‘]);//监听的文件 发生变化执行的任务
gulp.watch("src/sass/*.scss",[‘sass‘]);//监听的文件 发生变化执行的任务
gulp.watch("src/*.html",[‘copyHtml‘]);//监听的文件 发生变化执行的任务
});