成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

利用gulp處理簡(jiǎn)單的前端問題

PumpkinDylan / 661人閱讀

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

利用gulp處理js和less或者sass或者css
文件目錄

/項(xiàng)目根目錄
-gulpfile.js
-package.json
-/images
-/src
--/less
--/js
--*.html

//-node_modules//安裝包依賴之后自動(dòng)生成的

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

安裝包依賴

在git bash中cd到項(xiàng)目目錄，然后

npm install

會(huì)自動(dòng)安裝package.json里面寫的插件，根據(jù)自己項(xiàng)目所需要的插件來(lái)安裝,下面是我的項(xiàng)目的一些依賴

{
  "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還需要一個(gè)node的庫(kù)才能編譯
    "gulp-minify-css": "^1.2.3",//壓縮css
    "gulp-rename": "^1.2.2",//重新命名
    "gulp-template": "^3.1.0",//模板，這個(gè)可以替換一些關(guān)鍵字
    "gulp-uglify": "^1.5.3"http://js壓縮混淆
  }
}
編寫項(xiàng)目的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"};//資源路徑，一會(huì)會(huì)用template 來(lái)替換
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())   //執(zhí)行壓縮
        .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() {//監(jiān)聽文件的變化
    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運(yùn)行就會(huì)默認(rèn)執(zhí)行default這個(gè)任務(wù)，然后就會(huì)一直監(jiān)聽文件的改動(dòng).

圖片壓縮

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

其他

還可以在這個(gè)流程中加入es6的編譯，需要兩個(gè)庫(kù)
還可以自動(dòng)添加css前綴
等等

現(xiàn)在webpack很火，不過(guò)，對(duì)于簡(jiǎn)單的項(xiàng)目來(lái)說(shuō)gulp更適合

公眾號(hào)

我們的主頁(yè)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111673.html

相關(guān)文章

  • gulp-work-flow 前端工作流原來(lái)可以這么簡(jiǎn)單

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

    weakish 評(píng)論0 收藏0

  • 利用 Gulp 處理前端工作流程

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

    Yangder 評(píng)論0 收藏0

  • webpack 3 零基礎(chǔ)入門教程 #1 - 介紹

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

    張紅新 評(píng)論0 收藏0

  • 精讀《如何編譯前端項(xiàng)目與組件》

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

    jiekechoo 評(píng)論0 收藏0

  • 用gulp+mock實(shí)現(xiàn)前后端分離

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

    dailybird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<