gulp基本配置

tyheist 發(fā)布于2019-08-22 13:45 / 2263人閱讀

摘要：之前用到用具的時候會習慣把要點記錄在云筆記里面，時間一場自己發(fā)現下次用的時候那些要點并沒有多大的提示效果，有些還是要從新看配置真是慚愧。

之前用到用具的時候會習慣把要點記錄在云筆記里面，時間一場自己發(fā)現下次用的時候那些要點并沒有多大的提示效果，有些還是要從新看配置（真是慚愧）。這才生出寫一點文章記錄的想法，給需要的同學提供一點幫助，也給自己作為一個學習的筆記。

以下是用gulp對網站靜態(tài)資源管理的配置過程：

1. 首先確認有node的環(huán)境，沒有就裝一個
    
2. 全局安裝 gulp：
    ```
    npm install --global gulp
     ```   
3. 作為項目的開發(fā)依賴安裝：
    ```
    npm install --save-dev gulp
    ```
4. 安裝所需的各種插件（配置文件種說明了各個插件的用途）：
```
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename imagemin --save-dev
```
    
5. 在項目根目錄下創(chuàng)建一個名為 gulpfile.js 的文件，文件配置如下:


```
   // 引入 gulp
    var gulp = require("gulp"); 
    
    // 引入組件
    var jshint = require("gulp-jshint"); //js代碼校驗 
    var sass = require("gulp-sass");    //編譯css
    var imagemin = require("gulp-imagemin"); //壓縮圖片
    var concat = require("gulp-concat");
    var uglify = require("gulp-uglify");
    var rename = require("gulp-rename");    
    
    // 檢查腳本
    gulp.task("lint", function() {
        gulp.src("./static/src/js/*.js")
            .pipe(jshint())
            .pipe(jshint.reporter("default"));
    });
    
    // 編譯Sass
    gulp.task("sass", function() {
        gulp.src("./static/src/scss/*.scss")
            .pipe(sass())
            .pipe(gulp.dest("./static/dist/css"));
    });
    
    // 壓縮圖片
    gulp.task("imagemin", function() {
        gulp.src("./static/src/images/*.{png,jpg,gif,ico}")
             .pipe(imagemin({
                optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優(yōu)化等級）
                progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
             }))
             .pipe(gulp.dest("./static/dist/images"));
     });
    // 合并，壓縮js文件
    gulp.task("scripts", function() {
        gulp.src("./static/src/js/*.js")
            .pipe(concat("all.js"))
            .pipe(gulp.dest("./static/dist/js"))
            .pipe(rename("all.min.js"))
            .pipe(uglify())
            .pipe(gulp.dest("./static/dist/js"));
    });
    
    // 默認任務
    gulp.task("default", function(){
        gulp.run("lint", "sass","imagemin", "scripts");
    
        // 監(jiān)聽文件變化
        gulp.watch([
            "./static/src/scss/*.scss",
            "./static/src/images/**",
            "./static/src/js/*.js"
        ], function(){
            gulp.run("lint", "sass","imagemin", "scripts");
        });
    }); ```

在終端執(zhí)行 gulp default就可以執(zhí)行打包任務啦，效果如圖：

本例文件目錄結構如圖：

ps；第一次這在寫，在中午休息時間匆匆完成，不對的地方還請指正?

GPU云服務器云服務器 gulp gulp4 gulp 上傳cdn gulp-inject

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

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

前端從零單排之Gulp(第二期)

摘要：是個類似于的前端工作流工具，今天就簡單的介紹一下和一些我的使用感受在中安裝全局切換到你的前端工作目錄下確保你的前端工作目錄下有這個文件然后就已經安裝好了，馬上就可以進入簡單的配置了。但是在使用的工作之中會遇到一些問題。 gulp 是個類似于grunt的前端工作流工具，今天就簡單的介紹一下gulp和一些我的使用感受 Installing gulp 在Terminal中安裝全局gulp...

xiaolinbang 2019-08-21 12:17 評論0 收藏0
Glup快速入門整理

摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器能自動化...

HmyBmny 2019-08-20 18:12 評論0 收藏0
Glup快速入門整理

摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器能自動化...

jhhfft 2019-08-29 12:58 評論0 收藏0
Glup快速入門整理

摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器能自動化...

ysl_unh 2019-08-01 17:12 評論0 收藏0
從零開始創(chuàng)建 angularjs-gulp-es5 項目

摘要：為了動態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經可以在本地愉快的開發(fā)了。配置編譯任務開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時間會加入校驗添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 評論0 收藏0