使用gulp自動化前端工作流

HelKyle 發布于2019-08-19 17:16 / 1100人閱讀

摘要：安裝推薦安裝到項目目錄，不推薦全局目錄，因為后期會自動引入項目相關的支持包，如果全局安裝，這些支持包全都安裝在下，不利于管理，可能易引起沖突。

安裝gulp

gulp推薦安裝到項目目錄，不推薦全局目錄，因為后期gulp會自動引入項目相關的支持包，如果全局安裝gulp，這些支持包全都安裝在/usr/local/lib/node_modules/下，不利于管理，可能易引起沖突。

npm install gulp

安裝常用插件

// js壓縮
gulp-uglify
// css壓縮
gulp-clean-css
// 重命名
gulp-rename
// 合并文件
gulp-concat
// 捕獲錯誤
gulp-plumber
// 打包
gulp-zip
//過率console信息
gulp-strip-debug

在gulpfile.js中載入插件

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");
var plumber  = require("gulp-plumber");
var zip = require("gulp-zip");
var browserSync = require("browser-sync");

自動壓縮css重命名

定義一個任務compress-css,壓縮static文件夾下面的index.css,并且重命名為index.min.css,保存到build文件夾下面

gulp.task("compress-css", function() {
    gulp.src("static/index.css")
        .pipe(minifyCss())
        .pipe(rename("index.min.css")) 
        .pipe(gulp.dest("build"));
});

自動壓縮js代碼并且重命名

定義一個任務compress-js,壓縮static文件夾下面的index.js,并且重命名為index.min.js,保存到build文件夾下面

gulp.task("compress-js", function() {
    gulp.src("static/index.js")
        .pipe(uglify())
        .pipe(rename("index.min.js")) 
        .pipe(gulp.dest("build"));
});

自動合并文件

合并src下面的js文件，重命名為all.js，保存在build文件夾下面

gulp.task("minify", function (){
     return gulp.src("src/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("build"))
});

執行某個任務

gulp teskname

監視文件變化

這里定義一個默認的任務，只需要在gulp里面輸入gulp

gulp.task("default", function(){
    gulp.watch("src/*.*", function(){
        gulp.run("teakname")
    });
});

打包發布任務

新建任務zip，將build文件夾下面的文件全部打包為publish.zip,發布到release文件夾下面

gulp.task("zip", function(){
    return gulp.src("build/*")
        .pipe(plumber())
        .pipe(zip("publish.zip"))
        .pipe(gulp.dest("release"))
});

自動刷新瀏覽器

新建任務start，啟用一個本地server，監視當前目錄下的所有文件，一旦文件變化，瀏覽器reload

gulp.task("start", function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./*", function() {
        browserSync.reload();
    });
})

在build任務中過濾目標文件中的console.log();

var stripDebug = require("gulp-strip-debug");
gulp.task("build", function () {
        .gulp.src()
        .pipe(stripDebug())
        .pipe(gulp.dest());
});

監聽gulp任務結束,執行回調

gulp.task("dev", function(){
    gulp.src(src)
        .pipe(rename("app.js"))
        .on("end",function(){
           console.log("這里是回調")
        })

});

GPU云服務器云服務器前端工作 web前端好找工作嗎前端自動化 web前端自動化測試

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

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

gulp-work-flow 前端工作流原來可以這么簡單

摘要：話不多說，今天的主題是使用打造傳統項目的前端工作流。是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。這意味著，你可以用的方式編寫程序，又不用擔心現有環境是否支持。概述最近前端一直是一個火熱的話題，前端技術棧也是伴隨著nodejs的出現而更替的飛快，導致大部分前端開發者曾一度迷茫在這各種技術選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 評論0 收藏0
前端團隊 Gulp & Webpack 工作流 遷移記

摘要：那時候所配置的任務監聽匹配文件的變化自動刷新瀏覽器自動編譯自動補全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務，已經是完全滿足我們的需求了。直至到后來在雪碧圖的合并，多倍圖的輸出上，在上苦苦找尋不了比較完美的解決方案等等。折騰從 2015 到現在，短短的三年內，幾乎每年折騰一下工作流的更新換代。從最早開始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...

Baaaan 2019-08-20 17:17 評論0 收藏0
前端基礎工作流：sass自動化編輯成css

摘要：目前提供了觀察文件變化，自動將文件編譯成的功能。但在有些機子上跟蹤編譯非常慢。如果想更順手的完成更復雜的編譯，就需要使用工具進行處理。啟動提示打開編輯器編輯下文件，保存，查看下文件，已經編譯好了。目前sass提供了觀察文件變化，自動將sass文件編譯成css的功能。但在有些機子上跟蹤編譯非常慢。使用不便。如果想更順手的完成更復雜的編譯，就需要使用nodejs,gulp 工具進行處理。...

W4n9Hu1 2019-08-30 12:59 評論0 收藏0
Javascript五十問——從源頭細說Webpack與Gulp

摘要：前言與是目前圈子內比較活躍的前端構建工具。對于初學者來說，對這二者往往容易認識不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。打包后形成的文件出口。前言：Webpack 與 gulp是目前圈子內比較活躍的前端構建工具。網上有很多二者比較的文章，面試中也會經常遇到gulp，Webpack的區別這樣的問題。對于初學者來說，對這二...

lwx12525 2019-08-23 14:47 評論0 收藏0
做一個合格的前端，gulp資源大集合

摘要：承接前一篇做一個合格的前端，自動化構建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網開發過程中的前后端技術，如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。承接前一篇《做一個合格的前端，gulp自動化構建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點網：http://www.guandn.com (觀點網是一個獵獲新奇、收獲知識、重在獨立思考...

Baoyuan 2019-08-22 13:54 評論0 收藏0