gulp最佳實踐（包含js,css,html預編譯，合并，壓縮,瀏覽器自動刷新）

Awbeci 發布于2019-08-19 17:14 / 617人閱讀

摘要：是基于流的自動化構建工具官方網址安裝需要的模塊新建輸入下面的內容命令配置代碼說明看解釋，如果有任何疑問請查看官方入門手冊，網址在上面導入需要的模塊編譯，其中是防止出錯崩潰的插件編譯編譯將所有文

gulp是基于流的自動化構建工具
官方網址：http://www.gulpjs.com.cn/

安裝需要的模塊

新建package.json,輸入下面的內容

命令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

代碼說明看解釋，如果有任何疑問請查看官方入門手冊，網址在上面

// 導入需要的模塊
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是防止出錯崩潰的插件
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文件連接為一個文件并壓縮，存到public/css
gulp.task("concatCss", function() {
    gulp.src(["dist/css/*.css"])
        .pipe(concat("main.css"))
        .pipe(minifyCss())
        .pipe(gulp.dest("public/css"));
});


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



// 默認任務
gulp.task("default", ["watch"]);


// 監聽任務
gulp.task("watch", function() {

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


    // 預處理
    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"]);


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

});

測試

控制臺運行gulp
瀏覽器將自動打開
修改任意文件，瀏覽器自動刷新

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78326.html

gulp最佳實踐（包含js,css,html預編譯，合并，壓縮,瀏覽器自動刷新）

摘要：是基于流的自動化構建工具官方網址安裝需要的模塊新建輸入下面的內容命令配置代碼說明看解釋，如果有任何疑問請查看官方入門手冊，網址在上面導入需要的模塊編譯，其中是防止出錯崩潰的插件編譯編譯將所有文 gulp是基于流的自動化構建工具官方網址：http://www.gulpjs.com.cn/ 安裝需要的模塊新建package.json,輸入下面的內容命令npm install { ...

Eirunye 2019-08-01 14:58 評論0 收藏0
[ 前端實習日記 ] 構建靜態頁面基礎架構

以前我們敲靜態頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。后來，grunt,gulp等工具應運而生，當然它們不止這個功能，但卻很好地減輕了我們的負擔。這篇文章介紹一些如何使用這些工具使構建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業的還請參考...

lidashuang 2019-08-21 10:35 評論0 收藏0
前端工具系列之一 Gulp

摘要：從大約年開始前端不再是當初那個切圖排版的前端了，各種框架庫工具呈井噴之勢層出不窮。作為一個怕麻煩的懶人，對于前端的繁雜工作當然是要找一個自動化工具來處理，于是我遇到了。從(大約)2014年開始,前端不再是當初那個切圖排版的前端了，各種MV*框架、庫、工具呈井噴之勢層出不窮。構建工具比較有名的如Grunt、Gulp、Yeoman、webpack；依賴管理比如bower、npm，當然最流...

xiongzenghui 2019-08-21 10:51 評論0 收藏0
淺析git

摘要：淺析筆者在此整理了常見的命令，的重要性無需多言，與其再百度海中搜索命令，不妨嘗試收藏筆者的此篇作品。旨在快速高效地處理無論規模大小的任何軟件工程。其最大特色就是分支及合并操作非常快速簡便。淺析git 筆者在此整理了常見的git命令，git的重要性無需多言，與其再百度海中搜索git命令，不妨嘗試收藏筆者的此篇作品。希望對你的學習有所幫助。版本控制系統之git Git: (一)簡介：G...

explorer_ddf 2019-08-02 11:53 評論0 收藏0