npm install gulp -g

 2本地生成一個package.json的檔案

npm init

 3本地專案中需要安裝gulp（專案中需要require）

npm install gulp --save-dev

 4本地下載各個需要的模組，列如：gulp-cssnano,gulp-rename等

npm install gulp-cssnano --save-dev

npm insall gulp-rename --save-dev

5package.js檔案中匯入模組：require（模組名）

var gulp = require("gulp");   //引入gulp
var cssnano = require("gulp-cssnano");  //引入css壓縮模組
var rename = require("gulp-rename");  //引入修改名字模組
var uglify = require("gulp-uglify");  //引入壓縮js模組
var concat = require("gulp-concat");  //引入合併檔案模組
var imagemin = require("gulp-imagemin");  //引入壓縮圖片模組
var bs = require("browser-sync").create();  //引入自動重新整理瀏覽器模組

//task建立要執行的任務，第一個引數是任務的名字，第二個引數是個函式，要執行的任務
gulp.task("tick",function () {
    console.log("ksfkf");
});

//壓縮css檔案任務
gulp.task("css",function () {
    gulp.src("./css/*.css").pipe(cssnano()).pipe(gulp.dest("./dist/style"));
});

//修改名字的任務
gulp.task("re_css",function () {
    gulp.src("./css/*.css").pipe(cssnano()).pipe(rename("index.min.css")).pipe(gulp.dest("./dist/style"));
});

//壓縮js檔案

gulp.task("script",function () {
    gulp.src("./js/*.js").pipe(uglify()).pipe(rename({suffix:".min"})).pipe(gulp.dest("./dist/script"));
});

//合併檔案
gulp.task("cendor",function () {
    gulp.src(["./js/but.js","./js/nav.js"]).pipe(concat("index.min.js")).pipe(uglify()).pipe(gulp.dest("./dist/script"));
});

//壓縮圖片
gulp.task("img",function () {
    gulp.src("./images/*.*").pipe(imagemin()).pipe(gulp.dest("./dist/images"));
});

//監聽事件

gulp.task("watch",function () {
    gulp.watch("./css/*.css",["css"])
});

//自動重新整理瀏覽器時間
gulp.task("bs",function () {
    bs.init({
        "server":{
            "baseDir":"./"
        }
    });
});

gulp.task("bs_css",function () {
    gulp.src("./css/*.css").pipe(cssnano()).pipe(gulp.dest("./dist/style")).pipe(bs.stream());
});

gulp.task("bs_watch",function () {
    gulp.watch("./css/*.css",["bs_css"])
});

gulp.task("defult",["bs","bs_watch"]);