利用gulp處理簡單的前端問題

PumpkinDylan 發布于2019-08-29 11:28 / 648人閱讀

摘要：利用處理和或者或者文件目錄項目根目錄安裝包依賴之后自動生成的編譯后的文件放到這里安裝包依賴在中到項目目錄，然后會自動安裝里面寫的插件，根據自己項目所需要的插件來安裝下面是我的項目的一些依賴清除文件合并文件編

利用gulp處理js和less或者sass或者css

文件目錄

/項目根目錄
-gulpfile.js
-package.json
-/images
-/src
--/less
--/js
--*.html

//-node_modules//安裝包依賴之后自動生成的

//--/web//編譯后的文件放到這里

安裝包依賴

在git bash中cd到項目目錄，然后

npm install

會自動安裝package.json里面寫的插件，根據自己項目所需要的插件來安裝,下面是我的項目的一些依賴

{
  "name": "ionic-project",
  "version": "1.0.0",
  "description": "An Ionic project",
  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.1",//清除文件
    "gulp-concat": "^2.6.0",//合并文件
    "gulp-less": "^3.0.5",//編譯less，如果是sass還需要一個node的庫才能編譯
    "gulp-minify-css": "^1.2.3",//壓縮css
    "gulp-rename": "^1.2.2",//重新命名
    "gulp-template": "^3.1.0",//模板，這個可以替換一些關鍵字
    "gulp-uglify": "^1.5.3"http://js壓縮混淆
  }
}

編寫項目的gulpfile.js

var gulp = require("gulp"),
    minifycss = require("gulp-minify-css"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename"),
    less = require("gulp-less"),
    gclean = require("gulp-clean"),
    template = require("gulp-template");
var data = {cssLink: "css/main.css",jsLink: "js/main.min.js"};//資源路徑，一會會用template 來替換
gulp.task("clean", function() {
   return gulp.src("web", {read: false})
        .pipe(gclean());
});
gulp.task("minifycss", function() {
    gulp.src("src/less/*.less")
        .pipe(less())
        .pipe(minifycss())   //執行壓縮
        .pipe(gulp.dest("web/css"));  //輸出文件夾

});
gulp.task("minifyjs", function() {
    gulp.src("src/js/*.js")
        .pipe(concat("main.js"))    //合并所有js到main.js
        .pipe(rename({suffix: ".min"}))   //rename壓縮后的文件名
        .pipe(uglify())    //壓縮
        .pipe(gulp.dest("web/js"));  //輸出
});
gulp.task("watch", function() {//監聽文件的變化
    gulp.watch("src/less/*.less", ["minifycss"]);
    gulp.watch("src/js/*.js", ["minifyjs"]);
    gulp.watch("src/*.html", ["temp"]);
});


gulp.task("temp", function () {
    return gulp.src("src/*.html")
        .pipe(template(data))
        .pipe(gulp.dest("web"));
});
gulp.task("default", ["clean"], function(){
    gulp.start("minifycss", "minifyjs","images","temp","watch");
});

然后直接 gulp運行就會默認執行default這個任務，然后就會一直監聽文件的改動.

圖片壓縮

可以使用gulp的插件來壓縮，但是個人覺得還是用其他方法比較好，所以我把images放到了源碼外
推薦兩個壓縮圖片的網站tinypng 智圖
壓縮圖片在上線之前做就可以了

其他

還可以在這個流程中加入es6的編譯，需要兩個庫
還可以自動添加css前綴
等等

現在webpack很火，不過，對于簡單的項目來說gulp更適合

公眾號

我們的主頁

GPU云服務器云服務器簡單的web開發問題前端簡單嗎前端開發簡單嗎問題處理

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

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

gulp-work-flow 前端工作流原來可以這么簡單

摘要：話不多說，今天的主題是使用打造傳統項目的前端工作流。是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。這意味著，你可以用的方式編寫程序，又不用擔心現有環境是否支持。概述最近前端一直是一個火熱的話題，前端技術棧也是伴隨著nodejs的出現而更替的飛快，導致大部分前端開發者曾一度迷茫在這各種技術選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 評論0 收藏0
利用 Gulp 處理前端工作流程

摘要：基本用法基本根據匹配文件，返回，可以通過方法傳遞給后續的插件。一般用法，把中的內容按照指定的寫成文件，會自動創建不存在的文件夾。，用來代理請求，可以把發送到指定的地址。常用于開發，作用同上，也用于匹配資源，但用起來簡單很多。基本用法 // gulpfile.js gulp.task(foo, function() { gulp.src(glob) .pipe(...

Yangder 2019-08-21 10:37 評論0 收藏0
webpack 3 零基礎入門教程 #1 - 介紹

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

張紅新 2019-08-21 17:55 評論0 收藏0
精讀《如何編譯前端項目與組件》

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

jiekechoo 2019-08-23 14:52 評論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