gulp 使用案例

svtter 發布于2019-08-26 11:43 / 3506人閱讀

摘要：使用案例引入檢測文件模塊引入壓縮模塊引入合并文件模塊引入壓縮模塊引入壓縮的模塊引入壓縮圖片插件代碼來轉換中的樣式自動加上瀏覽器前綴解決方案設計稿寬，那么，即代碼中寫編譯后轉化成靜態服務器處理文件檢測壓縮合并文件

gulp 使用案例

var gulp = require("gulp");
var jshint = require("gulp-jshint"); // 引入檢測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 代碼來轉換CSS 中的樣式
var autoprefixer = require("autoprefixer"); //自動加上瀏覽器前綴
var postcsswritesvg = require("postcss-write-svg") // 解決1px方案

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

var browserSync = require("browser-sync")
var opn = require("opn")
//靜態服務器

// 1.處理js文件
gulp.task("js", function () {
    return gulp.src("js/*.js")
        .pipe(jshint()) //檢測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() ]))  //自動加上瀏覽器前綴
        .pipe(postcss(processors))
        //.pipe(minify()) //使用minify模塊進行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類型 默認:false 無損壓縮圖片
            optimizationLevel: 5, //number類型 默認:3 取值范圍:0-7(優化等級)
            interlced: true, //Boolean類型 默認false 隔行掃描gif進行渲染
            multipass: true //Boolean類型 默認false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest("build/images")) //輸入到build文件夾下的images文件夾下 
})

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

})

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

// 命令行輸入gulp或者 gulp default的時候就會執行
gulp.task("default", function(){
    //把任務串聯起來
    gulp.start("js", "css", "img", "html");

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

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

參考文章

云服務器 GPU云服務器 json使用案例數據分析使用案例 webrtc帶寬檢測demo使用案例 gulp

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

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

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

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

defcon 2019-08-26 11:50 評論0 收藏0
gulp插件解決瀏覽器緩存問題

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

TwIStOy 2019-08-26 13:40 評論0 收藏0
精讀《如何編譯前端項目與組件》

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

jiekechoo 2019-08-23 14:52 評論0 收藏0
Gulp入門教程

摘要：本教程分為兩個部分先講解的使用及參數說明，后以一個實際項目案例作為演練。或自動監視文件變化并執行指定的任務。項目代碼下載其他文獻官方接口文檔很多演示項目代碼其它教程文章 Gulp介紹 Gulp是一個前端開發的自動化構建工具。前端開發往往需要把LESS/SCSS文件進行編譯成CSS文件，JavaScript多文件合并成一個文件并壓縮以及一些其他需要重復性操作的工作。而Gulp就是通過簡單...

levius 2019-08-19 17:21 評論0 收藏0
前端模塊化的那些事兒

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

aaron 2019-08-20 12:11 評論0 收藏0