成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用gulp自動(dòng)化前端工作流

HelKyle / 1107人閱讀

摘要：安裝推薦安裝到項(xiàng)目目錄，不推薦全局目錄，因?yàn)楹笃跁?huì)自動(dòng)引入項(xiàng)目相關(guān)的支持包，如果全局安裝，這些支持包全都安裝在下，不利于管理，可能易引起沖突。

安裝gulp

gulp推薦安裝到項(xiàng)目目錄，不推薦全局目錄，因?yàn)楹笃趃ulp會(huì)自動(dòng)引入項(xiàng)目相關(guān)的支持包，如果全局安裝gulp，這些支持包全都安裝在/usr/local/lib/node_modules/下，不利于管理，可能易引起沖突。

npm install gulp
安裝常用插件 
// js壓縮
gulp-uglify
// css壓縮
gulp-clean-css
// 重命名
gulp-rename
// 合并文件
gulp-concat
// 捕獲錯(cuò)誤
gulp-plumber
// 打包
gulp-zip
//過(guò)率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");
自動(dòng)壓縮css重命名

定義一個(gè)任務(wù)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"));
});
自動(dòng)壓縮js代碼并且重命名

定義一個(gè)任務(wù)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"));
});
自動(dòng)合并文件

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

gulp.task("minify", function (){
     return gulp.src("src/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("build"))
});
執(zhí)行某個(gè)任務(wù) 
gulp teskname
監(jiān)視文件變化

這里定義一個(gè)默認(rèn)的任務(wù)，只需要在gulp里面輸入gulp

gulp.task("default", function(){
    gulp.watch("src/*.*", function(){
        gulp.run("teakname")
    });
});
打包發(fā)布任務(wù)

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

gulp.task("zip", function(){
    return gulp.src("build/*")
        .pipe(plumber())
        .pipe(zip("publish.zip"))
        .pipe(gulp.dest("release"))
});
自動(dòng)刷新瀏覽器

新建任務(wù)start，啟用一個(gè)本地server，監(jiān)視當(dāng)前目錄下的所有文件，一旦文件變化，瀏覽器reload

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

    gulp.watch("./*", function() {
        browserSync.reload();
    });
})
在build任務(wù)中過(guò)濾目標(biāo)文件中的console.log(); 
var stripDebug = require("gulp-strip-debug");
gulp.task("build", function () {
        .gulp.src()
        .pipe(stripDebug())
        .pipe(gulp.dest());
});
監(jiān)聽(tīng)gulp任務(wù)結(jié)束,執(zhí)行回調(diào) 
gulp.task("dev", function(){
    gulp.src(src)
        .pipe(rename("app.js"))
        .on("end",function(){
           console.log("這里是回調(diào)")
        })

});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78362.html

相關(guān)文章

  • gulp-work-flow 前端工作流原來(lái)可以這么簡(jiǎn)單

    摘要：話不多說(shuō)，今天的主題是使用打造傳統(tǒng)項(xiàng)目的前端工作流。是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。 概述 最近前端一直是一個(gè)火熱的話題，前端技術(shù)棧也是伴隨著nodejs的出現(xiàn)而更替的飛快，導(dǎo)致大部分前端開(kāi)發(fā)者曾一度迷茫在這各種技術(shù)選型上，比如前端自動(dòng)化工具就有Grunt，Gulp，Webpack，F(xiàn)is3等...

    weakish 評(píng)論0 收藏0

  • 前端團(tuán)隊(duì) Gulp & Webpack 工作流 遷移記

    摘要：那時(shí)候所配置的任務(wù)監(jiān)聽(tīng)匹配文件的變化自動(dòng)刷新瀏覽器自動(dòng)編譯自動(dòng)補(bǔ)全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務(wù)，已經(jīng)是完全滿足我們的需求了。直至到后來(lái)在雪碧圖的合并，多倍圖的輸出上，在上苦苦找尋不了比較完美的解決方案等等。 折騰 從 2015 到現(xiàn)在，短短的三年內(nèi)，幾乎每年折騰一下工作流的 更新?lián)Q代 。從最早開(kāi)始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...

    Baaaan 評(píng)論0 收藏0

  • 前端基礎(chǔ)工作流：sass自動(dòng)化編輯成css

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

    W4n9Hu1 評(píng)論0 收藏0

  • Javascript五十問(wèn)——從源頭細(xì)說(shuō)Webpack與Gulp

    摘要：前言與是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。對(duì)于初學(xué)者來(lái)說(shuō)，對(duì)這二者往往容易認(rèn)識(shí)不清，今天，就從事件的源頭，說(shuō)清楚與。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。打包后形成的文件出口。 前言：Webpack 與 gulp是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。網(wǎng)上有很多二者比較的文章，面試中也會(huì)經(jīng)常遇到gulp，Webpack的區(qū)別這樣的問(wèn)題。對(duì)于初學(xué)者來(lái)說(shuō)，對(duì)這二...

    lwx12525 評(píng)論0 收藏0

  • 做一個(gè)合格的前端，gulp資源大集合

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

    Baoyuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<