利用gulp.js壓縮css,js文件流程

guyan0319 發布于2019-08-20 17:21 / 1963人閱讀

摘要：并且重新輸出所有數據，因此你可以將它到多個文件夾。如果某文件夾不存在，將會自動創建它。注意和的時候要引用對哦

看流程之前肯定得先了解一下gulp.js吧,附上鏈接,大家自己去看APIgulp.js中文網
下面就來說說怎么使用gulp.js,gulp.js是基于node來使用的,那么問題又來了,nodejs怎么安裝,這個大家還是去菜鳥教程看一下;這里就不多說了;
第一步.在終端輸入

node -v
查看一下你的nodejs是否安裝成功,如果安裝成功, 就會提示你的版本 ,我的是 v4.4.4;

第二步.全局安裝gulp

sudo npm install gulp@latest -g

第三部.安裝項目的開發依賴

sudo npm install --save-dev gulp

第四步.在項目根目錄下創建一個名為 gulpfile.js 的文件

var gulp = require("gulp");

gulp.task("default", function() {
// 將你的默認的任務代碼放在這
});

第五步.安裝壓縮的模塊

css安裝模塊, gulp-minify-css模塊;在命令行輸入,
sudo npm install gulp-minify-css
安裝成功以后會提示你,警告"
npmWARNdeprecated gulp-minify-css@1.2.4: Please use gulp-clean-css",那你就需要再次安裝一下
sudo npm install gulp-clean-css,
安裝成功以后就可以用啦;
js模塊,gulp-gulify
sudo npm install gulp-uglify@latest
好啦,兩個都安裝成功了,接下來就是使用的時候啦;直接上代碼

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var minfy = require("gulp-minify-css");
// 創建壓縮任務
gulp.task("default", function() {
    // gulp.src(path)的參數可以為tring也可以為Array,
            //每一個元素都是你要壓縮的文件的相對路徑
       gulp.src(["./static/js/a.js",
                   "./static/js/b.js",
                   "./static/js/c.js",
                   "./static/js/d.js",])
            .pipe(uglify())
       // gulp.dest(path)能被 pipe 進來，并且將會寫文件。
       //并且重新輸出（emits）所有數據，因此你可以將它 pipe 到多個文件夾。
       // 如果某文件夾不存在，將會自動創建它。
            .pipe(gulp.dest("./static/min.js"));

       gulp.src(["./static/css/a.css",
                   "./static/css/b.css",
                   "./static/css/c.css",
                   "./static/css/d.css"])
            .pipe(minfy())
            .pipe(gulp.dest("./static/min.css"));

});

注意js和css,pipe的時候要引用對哦

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

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

gulp詳細基礎教程

摘要：核心概念流流，簡單來說就是建立在面向對象基礎上的一種抽象的處理數據的工具。類型，設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接。一、gulp簡介 1.gulp是什么？ gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工...

xuhong 2019-08-28 18:16 評論0 收藏0
gulp詳細基礎教程

摘要：核心概念流流，簡單來說就是建立在面向對象基礎上的一種抽象的處理數據的工具。類型，設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接。一、gulp簡介 1.gulp是什么？ gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工...

vibiu 2019-08-21 10:38 評論0 收藏0
gulp詳細基礎教程

摘要：核心概念流流，簡單來說就是建立在面向對象基礎上的一種抽象的處理數據的工具。類型，設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接。一、gulp簡介 1.gulp是什么？ gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工...

張金寶 2019-08-01 14:51 評論0 收藏0
用gulp+mock實現前后端分離

摘要：當然需要的工具不只有這些，其他的一些可選工具還有文件壓縮壓縮時用到的文件重命名檢查一般編輯器自帶校驗提示工具等等，具體根據項目需要安裝。 gulp 前端自動化構建工具需要配置nodejs環境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。 npm install gulp -g 創建項目目錄、初始化npm包、gulp npm init gulp init 下載gul...

dailybird 2019-08-20 18:08 評論0 收藏0
學習前端自動化構建工具Gulp

摘要：是基于的自動任務運行器，她能自動化的完成等文件的測試檢查合并壓縮格式化瀏覽器自動刷新部署文件生成，并監聽文件改動后重復這些步驟。易于學習通過最少的，掌握毫不費力，構建工作盡在掌握如同一系列流管道。 Gulp是什么？ gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且能幫我們完成前端開發過程中的很多重復的任務，使用它，可以大大提高我...

muzhuyu 2019-08-19 17:43 評論0 收藏0