###1. 安裝###
全局安裝 gulp：
```
> npm install --global gulp
```
初始化項目:
1. 創(chuàng)建項目目錄:
```
> mkdir demo01
> cd demo01
```
2. 創(chuàng)建package.json
```
> npm init
```
按照提示完成配置,就會在項目目錄下創(chuàng)建 package.json 的文件

3. 作為項目的開發(fā)依賴（devDependencies）安裝:
```
> npm install gulp --save-dev
```
在項目中安裝gulp并添加package.json

###2. 創(chuàng)建任務(wù) -gulpfile.js###
創(chuàng)建gulpfile.js文件
```
//引入gulp依賴
var gulp = require("gulp");

//添加gulp任務(wù),第一個參數(shù)是任務(wù)的名稱,第二個參數(shù)是任務(wù)的方法
gulp.task("hello", function() {
console.log("hello");
});
```
命令行執(zhí)行
```
> gulp hello
```

添加默認(rèn)任務(wù):
```
var gulp = require("gulp");

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

//默認(rèn)任務(wù)列表
gulp.task("default", ["hello"]);
```
命令行執(zhí)行:
```
> gulp
```
運行g(shù)ulp之后,會執(zhí)行default列表中的任務(wù)

###3. gulp基礎(chǔ)###

```
gulp.src(); //獲取處理文件
gulp.pipe(); //處理管道,指定處理方式
gulp.src(gulp.dest()); //將文件輸出到指定的地方
```

```
//單個文件復(fù)制
gulp.task("copy-index", function() {
return gulp.src("./index.html").pipe(gulp.dest("./dist"));
});
------------------------------------------------------------
globs
//指定文件格式的復(fù)制
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"));
});

//批量執(zhí)行任務(wù)
gulp.task("build", ["copy-index","images","data"], function() {
console.log("編譯成功")
});

//任務(wù)監(jiān)視
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 創(chuàng)建本地服務(wù)器: gulp-connect

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

```
gulp.task("server", function() {
connect.server({
root: "dist", //設(shè)置服務(wù)的根目錄
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"))
});

```

轉(zhuǎn)載于:https://www.cnblogs.com/joesbell/p/5913523.html

超強干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的gulp折腾的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。