gulp折腾

Posted 2020-08-11 Dear 丶Lord

###1. 安装###
全局安装 gulp：
```
> npm install --global gulp
```
初始化项目:
1. 创建项目目录:
```
> mkdir demo01
> cd demo01
```
2. 创建package.json
```
> npm init
```
按照提示完成配置,就会在项目目录下创建 package.json 的文件

3. 作为项目的开发依赖（devDependencies）安装:
```
> npm install gulp --save-dev
```
在项目中安装gulp并添加package.json

###2. 创建任务 -gulpfile.js###
创建gulpfile.js文件
```
//引入gulp依赖
var gulp = require("gulp");

//添加gulp任务,第一个参数是任务的名称,第二个参数是任务的方法
gulp.task("hello", function() {
console.log("hello");
});
```
命令行执行
```
> gulp hello
```

添加默认任务:
```
var gulp = require("gulp");

gulp.task("hello", function() {
console.log("hello");
});

//默认任务列表
gulp.task("default", ["hello"]);
```
命令行执行:
```
> gulp
```
运行gulp之后,会执行default列表中的任务

###3. gulp基础###

```
gulp.src(); //获取处理文件
gulp.pipe(); //处理管道,指定处理方式
gulp.src(gulp.dest()); //将文件输出到指定的地方
```

```
//单个文件复制
gulp.task("copy-index", function() {
return gulp.src("./index.html").pipe(gulp.dest("./dist"));
});
------------------------------------------------------------
globs
//指定文件格式的复制
gulp.task("images", function() {
return gulp.src("./images/*.jpg").pipe(gulp.dest("./dist/images"));
});

//指定多个文件扩展名: 可以指定多个扩展名
gulp.task("images", function() {
return gulp.src("./images/*.{jpg,png}").pipe(gulp.dest("./dist/images"))
});

//所有文件 **/* 表示images下所有的目录和子目录下所有的文件
gulp.task("images", function() {
return gulp.src("./images/**/*").pipe(gulp.dest("./dist/images"))
});

多个globs
gulp.task("data", function() {
return gulp.src(["./xml/*.xml", "./json/*.json"]).pipe(gulp.dest("./dist/data"));
});

//排除
gulp.task("data", function() {
return gulp.src(["./xml/*.xml", "./json/*.json", "!./json/secret-*.json"]).pipe(gulp.dest("./dist/data"));
});

//批量执行任务
gulp.task("build", ["copy-index","images","data"], function() {
console.log("编译成功")
});

//任务监视
gulp.task("watch", function() {
gulp.watch("./index.html", ["copy-index"]);
gulp.watch("./images/**/*.{jpg,png}", ["images"]);
gulp.watch(["./xml/*.xml","./json/*.json","!./json/secret-*.json"],["data"]);
});
```
###4. 插件###
4.1 编译Sass: gulp-sass

4.2 编译Less: gulp-less

4.3 创建本地服务器: gulp-connect

```
> npm install gulp-connect --save-dev
```

```
gulp.task("server", function() {
connect.server({
root: "dist", //设置服务的根目录
port: "8081"
});
});

> gulp server
```
4.4 文件合并: gulp-concat

```
> npm install gulp-concat --save-dev
```

```
gulp.task("scripts", function() {
return gulp.src(["./javascripts/jquery.js", "./javascripts/angular-route.js"])
.pipe(concat("vender.js"))
.pipe(gulp.dest("./dist/scripts"));
});
```

4.5 最小化js文件(文件压缩): gulp-uglify
```
> npm install gulp-uglify
```

```
gulp.task("scripts", function() {
return gulp.src(["./javascripts/jquery.js", "./javascripts/angular-route.js"])
.pipe(concat("vender.js"))
.pipe(uglify()) //文件压缩
.pipe(gulp.dest("./dist/scripts"));
});
```

4.6 最小化css文件: gulp-minify-css
```
> npm install gulp-minify-css --save-dev
```

```
gulp.task("minifyCss", function() {
return gulp.src("./stylesheets/main.css")
.pipe(minifyCss())
.pipe(gulp.dest("./dist/css"));
})
```

4.7 最小化图像: gulp-imagemin
```
> npm install gulp-imagemin --save-dev
```
```
gulp.task("imagemin", function() {
return gulp.src("./images/**/*")
.pipe(imagemin())
.pipe(gulp.dest("./dist/images"))
});

```