gulp最佳實(shí)踐（包含js,css,html預(yù)編譯，合并，壓縮,瀏覽器自動(dòng)刷新）

Eirunye 發(fā)布于2019-08-01 14:58 / 3210人閱讀

摘要：是基于流的自動(dòng)化構(gòu)建工具官方網(wǎng)址安裝需要的模塊新建輸入下面的內(nèi)容命令配置代碼說(shuō)明看解釋?zhuān)绻腥魏我蓡?wèn)請(qǐng)查看官方入門(mén)手冊(cè)，網(wǎng)址在上面導(dǎo)入需要的模塊編譯，其中是防止出錯(cuò)崩潰的插件編譯編譯將所有文

gulp是基于流的自動(dòng)化構(gòu)建工具
官方網(wǎng)址：http://www.gulpjs.com.cn/

安裝需要的模塊

新建package.json,輸入下面的內(nèi)容

命令npm install

{
  "name": "autopractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.10.1",
    "coffee-script": "^1.10.0",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1",
    "gulp-coffee": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.3.1",
    "gulp-jade": "^1.1.0",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.2",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.5.1",
    "gulp-webpack": "^1.5.0",
    "jade": "^1.11.0",
    "jshint": "^2.8.0"
  }
}

配置gulp

代碼說(shuō)明看解釋?zhuān)绻腥魏我蓡?wèn)請(qǐng)查看官方入門(mén)手冊(cè)，網(wǎng)址在上面

// 導(dǎo)入需要的模塊
var gulp = require("gulp"),
    less = require("gulp-less"),
    jade = require("gulp-jade"),
    coffee = require("gulp-coffee"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    browserSync = require("browser-sync").create(),
    plumber = require("gulp-plumber"),
    minifyCss = require("gulp-minify-css");


// 編譯less，其中plumber是防止出錯(cuò)崩潰的插件
gulp.task("less", function() {
    gulp.src("src/less/*.less")
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest("dist/css"));
});

// 編譯jade
gulp.task("jade", function() {
    gulp.src("src/jade/*.jade")
        .pipe(plumber())
        .pipe(jade())
        .pipe(gulp.dest("public"));
});

// 編譯coffee
gulp.task("coffee", function() {
    gulp.src("src/coffee/*.coffee")
        .pipe(plumber())
        .pipe(coffee())
        .pipe(gulp.dest("dist/js"));
});



// 將所有css文件連接為一個(gè)文件并壓縮，存到public/css
gulp.task("concatCss", function() {
    gulp.src(["dist/css/*.css"])
        .pipe(concat("main.css"))
        .pipe(minifyCss())
        .pipe(gulp.dest("public/css"));
});


// 將所有js文件連接為一個(gè)文件并壓縮，存到public/js
gulp.task("concatJs", function() {
    gulp.src(["dist/js/*.js"])
        .pipe(concat("main.js"))
        .pipe(uglify())
        .pipe(gulp.dest("public/js"));
});



// 默認(rèn)任務(wù)
gulp.task("default", ["watch"]);


// 監(jiān)聽(tīng)任務(wù)
gulp.task("watch", function() {

    // 建立瀏覽器自動(dòng)刷新服務(wù)器
    browserSync.init({
        server: {
            baseDir: "public"
        }
    });


    // 預(yù)處理
    gulp.watch("src/jade/**", ["jade"]);
    gulp.watch("src/coffee/**", ["coffee"]);
    gulp.watch("src/less/**", ["less"]);


    // 合并壓縮
    gulp.watch("dist/css/*.css", ["concatCss"]);
    gulp.watch("dist/js/*.js", ["concatJs"]);


    // 自動(dòng)刷新
    gulp.watch("public/**", function() {
        browserSync.reload();
    });

});

測(cè)試

控制臺(tái)運(yùn)行gulp
瀏覽器將自動(dòng)打開(kāi)
修改任意文件，瀏覽器自動(dòng)刷新