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

資訊專欄INFORMATION COLUMN

gulp 使用案例

svtter / 3514人閱讀

摘要：使用案例引入檢測(cè)文件模塊引入壓縮模塊引入合并文件模塊引入壓縮模塊引入壓縮的模塊引入壓縮圖片插件代碼來轉(zhuǎn)換中的樣式自動(dòng)加上瀏覽器前綴解決方案設(shè)計(jì)稿寬，那么，即代碼中寫編譯后轉(zhuǎn)化成靜態(tài)服務(wù)器處理文件檢測(cè)壓縮合并文件

gulp 使用案例 
var gulp = require("gulp");
var jshint = require("gulp-jshint"); // 引入檢測(cè)js文件模塊
var uglify = require("gulp-uglify"); // 引入js壓縮模塊
var concat = require("gulp-concat"); // 引入合并文件模塊
var minhtml = require("gulp-minify-html"); // 引入html壓縮模塊
var minify = require("gulp-minify-css"); // 引入壓縮css的模塊
var imagemin = require("gulp-imagemin"); // 引入壓縮圖片插件
var postcss = require("gulp-postcss"); //JavaScript 代碼來轉(zhuǎn)換CSS 中的樣式
var autoprefixer = require("autoprefixer"); //自動(dòng)加上瀏覽器前綴
var postcsswritesvg = require("postcss-write-svg") // 解決1px方案

// UI設(shè)計(jì)稿750px寬，那么100vw = 750px，即1vw = 7.5px
var pxtoviewport = require("postcss-px-to-viewport"); // 代碼中寫px編譯后轉(zhuǎn)化成vm

var browserSync = require("browser-sync")
var opn = require("opn")
//靜態(tài)服務(wù)器

// 1.處理js文件
gulp.task("js", function () {
    return gulp.src("js/*.js")
        .pipe(jshint()) //檢測(cè)js
        .pipe(uglify()) //壓縮js
        .pipe(concat("index.js")) //合并js文件并命名為"index.js"
        .pipe(gulp.dest("build/js")); //將合并后的js文件輸出到build文件夾下      
});

// 2.處理css
gulp.task("css", function () {
    var processors = [
        pxtoviewport({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 5,
            viewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false
        })
    ];
    return gulp.src("css/*.css") // 指定css文件夾下的所有后綴為.css的文件
        .pipe(postcss([ autoprefixer() ]))  //自動(dòng)加上瀏覽器前綴
        .pipe(postcss(processors))
        //.pipe(minify()) //使用minify模塊進(jìn)行css 壓縮
        .pipe(gulp.dest("build/css")) // 最終將壓縮的文件輸出到minicss文件下            
})

// 3.壓縮img
gulp.task("img", function () {
    gulp.src("images/*.{png,jpg,gif,ico}")
        .pipe(imagemin({
            progressive: true, //Boolean類型 默認(rèn):false 無損壓縮圖片
            optimizationLevel: 5, //number類型 默認(rèn):3 取值范圍:0-7(優(yōu)化等級(jí))
            interlced: true, //Boolean類型 默認(rèn)false 隔行掃描gif進(jìn)行渲染
            multipass: true //Boolean類型 默認(rèn)false 多次優(yōu)化svg直到完全優(yōu)化
        }))
        .pipe(gulp.dest("build/images")) //輸入到build文件夾下的images文件夾下 
})

// 4.壓縮html
gulp.task("html", function () {
    gulp.src("*.html") //指定當(dāng)前文件夾下的所有html文件
        .pipe(minhtml()) //進(jìn)行壓縮
        .pipe(gulp.dest("build")) //將壓縮后的文件輸出到build文件夾下
        .pipe(browserSync.stream()); //自動(dòng)打開瀏覽器

})

// 定義path
var path = {
    css: "./css/*.css",
    js: "./js/*.js",
    html: "./*.html",
    src: "./build"    
};

// 命令行輸入gulp或者 gulp default的時(shí)候就會(huì)執(zhí)行
gulp.task("default", function(){
    //把任務(wù)串聯(lián)起來
    gulp.start("js", "css", "img", "html");

    //打開靜態(tài)服務(wù)器
    browserSync.init({
        server:{
            baseDir: path.src
        },
        port:3000,
        open:false
    }, function(){
        var homepage = "http://localhost:3000/";
        opn(homepage);
    });

    //監(jiān)聽文件的變化實(shí)時(shí)編譯 然后刷新
    gulp.watch([path.html, path.js, path.css]).on("change", function() {
        gulp.start("js", "css", "img", "html");        
        browserSync.reload();
    });
});

參考文章

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

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

相關(guān)文章

  • 使用gulp+browser-sync搭建Sass自動(dòng)化編譯以及自動(dòng)刷新所需要的插件

    使用gulp+browser-sync搭建Sass自動(dòng)化編譯以及自動(dòng)刷新所需要的插件 按照gulp需求插件 安裝browser-sync（在命令行中輸入） npm install --save-dev browser-sync 如果網(wǎng)速比較慢，可以用下面的cnpm命令運(yùn)行： cnpm install --save-dev browser-sync 下面列一些安裝其它的插件，如需用到可以...

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

  • gulp插件解決瀏覽器緩存問題

    摘要：以及列出的是本妹子最常用的插件，小伙伴們可以參考。案例地址二解決瀏覽器緩存問題為靜態(tài)文件添加唯一值，如。我們主要是用將轉(zhuǎn)換成可以在瀏覽器中運(yùn)行的代碼。合并文件相關(guān)預(yù)處理器。 一、前言 有些簡(jiǎn)單前端小項(xiàng)目，不需要涉及框架，前端打包壓縮的話本妹子還是喜歡用gulp。本文將用gulp-rev和gulp-rev-rewrite解決cdn緩存問題。以及列出的是本妹子最常用的gulp插件，小伙伴們...

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

  • 精讀《如何編譯前端項(xiàng)目與組件》

    摘要：歷史上由于是作為的替代品出現(xiàn)，當(dāng)時(shí)要解決的問題是處理瀏覽器兼容問題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個(gè)文件，但模塊化功能遠(yuǎn)遠(yuǎn)比弱，基本上只能合并，但不能理解模塊概念。 1 引言 說到前端編譯方案，也就是如何打包項(xiàng)目，如何編譯組件，可選方案有很多，比如： 通過 webpack / parcel / gulp 構(gòu)建項(xiàng)目。 通過 parcel / gulp / b...

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

  • Gulp入門教程

    摘要：本教程分為兩個(gè)部分先講解的使用及參數(shù)說明，后以一個(gè)實(shí)際項(xiàng)目案例作為演練?；蜃詣?dòng)監(jiān)視文件變化并執(zhí)行指定的任務(wù)。項(xiàng)目代碼下載其他文獻(xiàn)官方接口文檔很多演示項(xiàng)目代碼其它教程文章 Gulp介紹 Gulp是一個(gè)前端開發(fā)的自動(dòng)化構(gòu)建工具。前端開發(fā)往往需要把LESS/SCSS文件進(jìn)行編譯成CSS文件，JavaScript多文件合并成一個(gè)文件并壓縮以及一些其他需要重復(fù)性操作的工作。而Gulp就是通過簡(jiǎn)單...

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

  • 前端模塊化的那些事兒

    摘要：規(guī)范異步模塊聲明規(guī)范公共模塊聲明模塊化的核心價(jià)值模塊化最核心的價(jià)值在于解決不同文件之間的分工和調(diào)用問題，即依賴關(guān)系。 一、什么是模塊？ 定義：具有相同屬性和行為的事物的集合在前端中：將一些屬性比較類似和行為比較類似的內(nèi)容放在同一個(gè)js文件里面，把這個(gè)js文件稱為模塊目的：為了每個(gè)js文件只關(guān)注與自身有關(guān)的事情，讓每個(gè)js文件各行其職 二、什么是模塊化？CommonJS是什么？AMD和C...

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

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

0條評(píng)論

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