今天寫了一個簡單的gulp 實例 分享給大家！ 比較適合gulp 初學者

首選： 看看gulp官網了解一些基本的定義

　　　官網地址 ： http://www.gulpjs.com.cn/

搭建node環境 安裝 gulp 自行百度吧！

文件目錄

dist : 打包後文件所在目錄

src ： 源文件目錄

glpfile.js ： gulp的配置文件

package.json ： 配置文件

安裝依賴 ：

"devDependencies": {
  "colors": "^1.0.3",
  "gulp": "^3.8.11",
  "gulp-autoprefixer": "^2.1.0",
  "gulp-imagemin": "^2.2.1",
  "gulp-less": "^3.0.2",
  "gulp-minify-css": "^1.0.0",
  "gulp-ruby-sass": "^1.0.1",
  "gulp-sourcemaps": "^1.5.1",
  "gulp-uglify": "^1.1.0",
  "gulp-watch-path": "^0.0.7",
  "stream-combiner2": "^1.0.2"
},

準備工作做好以後 開始編寫 gulpfile.js 文件

一： 引入你所需要的依賴

var gulp=require("gulp");
var minifyCSS = require(‘gulp-minify-css‘)
var uglify = require(‘gulp-uglify‘)
var rename = require("gulp-rename");
var minimist = require("minimist");
var fileinclude = require("gulp-file-include");

二 ： 配置相關路徑
　

var basePath = "./src";  //源文件目錄
var releasePath = "./dist";  //資源發布目錄

var paths = {

    html : [
        "./src/*.html"
    ],
    indexJs : [
        "./src/js/index.js"
    ],
    indexCss : [
        "./src/css/index.css"
    ]
}

三 ： 建立 html 任務

gulp.task("html", function () {
　　// 入口文件路徑
    gulp.src(paths.html)

　　// 功能函數
    .pipe(fileinclude({
        prefix: "@@",
        basePath: "@file"
    }))
　　　　　// 輸出文件路徑
        .pipe(gulp.dest(releasePath + "/"))
});

四 ： 建立css 任務

gulp.task("indexCss", function () {
    // js 路徑
    gulp.src(paths.indexCss)
        .pipe(rename("index.css"))
　　　　　// 壓縮 css 
        .pipe(minifyCSS())
        // 輸出路徑
        .pipe(gulp.dest(releasePath + "/css"))
});

五 ： 建立 js 任務

gulp.task("indexJs", function () {
    // js 路徑
    gulp.src(paths.indexJs)
        .pipe(rename("index.js"))
　　　　　// 壓縮 js 
        .pipe(uglify())
        .pipe(gulp.dest(releasePath + "/js"))
});

最後 ：調用任務

gulp.task("default",[‘html‘]);

寫一個最簡單的gulp 實例