使用Gulp進行Javascript以及css壓縮合并

codeKK 發布于2019-08-19 17:17 / 2366人閱讀

摘要：完成安裝之后，需要使用安裝。此時項目根目錄下會多出下面這個文件夾好的，現在已經安裝完成了，但是本身不提供壓縮合并等功能，需要使用的相關插件。使用，現在可以使用了，在項目根目錄下創建文件。任務完成，只需要將中，引用的路徑修改成新的路徑即可。

1.安裝gulp

gulp是基于Node.js的前端構建工具。所以首先需要安裝nodejs，安裝nodejs。

完成nodejs安裝之后，需要使用npm安裝gulp。

先安裝全局gulp

npm install -g gulp
然后在項目根目錄下安裝本地gulp。

此時項目根目錄下會多出下面這個文件夾 node_modules

好的，現在gulp已經安裝完成了，但是gulp本身不提供js壓縮合并等功能，需要使用gulp的相關插件。目前只需要完成js壓縮合并和css文件壓縮的功能，先安裝相應的插件：

1.css壓縮　　gulp-minify-css

2.js壓縮　　　gulp-uglify

3.js合并　　　gulp-concat　　

由于壓縮之前需要對js代碼進行代碼檢測，壓縮完成之后需要加上min的后綴，我們還需要安裝另外兩個插件：

4.重命名　　 gulp-rename

5.js代碼檢測　 gulp-jshint　(或gulp-jslint)

(更多插件可以查看 http://gulpjs.com/plugins/ )

在項目根目錄下執行以下命令：

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安裝好的插件會出現在上面提到的node_modules文件夾中。

2.使用gulp

ok，現在可以使用gulp了，在項目根目錄下創建gulpfile.js文件。

在gulpfile.js中添加以下代碼

var gulp = require("gulp")，
    minifycss = require("gulp-minify-css")，
    concat = require("gulp-concat")，
    uglify = require("gulp-uglify")，
    rename = require("gulp-rename")，
    jshint=require("gulp-jshint");
    //語法檢查
    gulp.task("jshint"， function () {
        return gulp.src("js/*.js")
            .pipe(jshint())
            .pipe(jshint.reporter("default"));
    });
    //壓縮css
    gulp.task("minifycss"， function() {
        return gulp.src("css/*.css")    //需要操作的文件
            .pipe(rename({suffix: ".min"}))   //rename壓縮后的文件名
            .pipe(minifycss())   //執行壓縮
            .pipe(gulp.dest("Css"));   //輸出文件夾
    });
    //壓縮，合并 js
    gulp.task("minifyjs"， function() {
        return gulp.src("js/*.js")      //需要操作的文件
            .pipe(concat("main.js"))    //合并所有js到main.js
            .pipe(gulp.dest("js"))       //輸出到文件夾
            .pipe(rename({suffix: ".min"}))   //rename壓縮后的文件名
            .pipe(uglify())    //壓縮
            .pipe(gulp.dest("Js"));  //輸出
    });
　　//默認命令，在cmd中輸入gulp后，執行的就是這個任務(壓縮js需要在檢查js之后操作)
    gulp.task("default"，["jshint"]，function() {
        gulp.start("minifycss"，"minifyjs"); 
　　});

上述代碼中的相關方法可以查看 gulp API docs

在文件根目錄下執行gulp命令：

(如果Js文件有問題時，會出現相應的error提示，按照提示的錯誤信息修改即可)

bingo，現在可以在css文件夾中看到壓縮好的css文件，在js中可以看到合并壓縮好的main.min.js 。任務完成，只需要將html中css，js引用的路徑修改成新的路徑即可。

增加Sass

npm install gulp-sass --save-dev

"use strict";
 
var gulp = require("gulp");
var sass = require("gulp-sass");
 
gulp.task("sass", function () {
  gulp.src("./sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css"));
});
 
gulp.task("sass:watch", function () {
  gulp.watch("./sass/**/*.scss", ["sass"]);
});

云服務器 GPU云服務器亞馬遜云服務器租用以及使用 JS CSS 壓縮 javascript 壓縮 javascript壓縮

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

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

使用Gulp進行Javascript以及css壓縮合并

摘要：完成安裝之后，需要使用安裝。此時項目根目錄下會多出下面這個文件夾好的，現在已經安裝完成了，但是本身不提供壓縮合并等功能，需要使用的相關插件。使用，現在可以使用了，在項目根目錄下創建文件。任務完成，只需要將中，引用的路徑修改成新的路徑即可。 1.安裝gulp gulp是基于Node.js的前端構建工具。所以首先需要安裝nodejs，安裝nodejs。完成nodejs安裝之后，需要使用n...

sixgo 2019-08-28 18:28 評論0 收藏0
webpack 3 零基礎入門教程 #1 - 介紹

摘要：所以它在某些程度上，跟的功能有些相同。嚴格上講，模塊化不是他強調的東西，他旨在規范前端開發流程。更是明顯強調模塊化開發，而那些文件壓縮合并預處理等功能，不過是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來說一下 webpack 是什么。 webpack 的...

張紅新 2019-08-21 17:55 評論0 收藏0
使用 Gulp 自動化構建工具快速搭建項目

摘要：通過本文，我們將學習如何使用來改變開發流程，從而使開發更加快速高效。中文網站詳細入門教程使用是基于的，需要要安裝為了確保依賴環境正確，我們先執行幾個簡單的命令檢查。詳盡使用參見官方文檔，中文文檔項目地址為了UED前端團隊更好的協作開發同時提高項目編碼質量，我們需要將Web前端使用工程化方式構建；目前需要一些簡單的功能： 1. 壓縮HTML 2. 檢查JS 3. 編譯SA...

glumes 2019-08-20 15:57 評論0 收藏0
前端構建工具整理

摘要：常見前端構建工具的分類和對比是附帶的包管理器，是內置的一個功能，允許在文件里面使用字段定義任務在這里，一個屬性對應一段腳本，原理是通過調用去運行腳本命令。前文端技術范圍不斷發展，前端開發不僅限于直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...

leo108 2019-08-23 10:53 評論0 收藏0
gulp 使用案例

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

svtter 2019-08-26 11:43 評論0 收藏0