duo, gulp 管理前端項目

Jackwoo 發布于2019-08-21 10:43 / 866人閱讀

摘要：結合的學習，用最適合練手。目的用，管理前端項目這里面用到了引用庫引用本地庫支持加載的都可以用引用本地模板引用其它庫這里面，將插入模板，將替換為哈希值。寫下模板內容基本完成了。在項目目錄下執行會生成。

這幾天看了幾個前端包管理器：seajs，browserfiy，duo等。結合nodejs的學習，用duo最適合練手。

目的：用duo，gulp管理前端項目 index.js

var uid = require("matthewmueller/uid");
var template = require("./lib/template.js");
var data = require("./tmpl/content.html");
var render = template.compile(data);
var html = render({user: "techfellow", uid: uid()});

$(".wrapper").append(html);

這里面用到了：

引用github庫：uid

引用本地庫：template.js（支持AMD加載的都可以用）

引用本地模板：content.html

引用其它庫：jquery

index.html

這里面，wrapper將插入模板，rev=@@hash將替換為哈希值。

寫下模板內容：

tmpl/content.html


    Hello, {{user}}! Your ID is: {{uid}}

基本完成了。

在項目目錄下執行：

duo index.js

會生成build/index.js。

運行看看效果：

Hello, techfellow! Your ID is: ovdnol9

加上gulp的壓縮、混淆、版本控制功能：

gulpfile.js

var gulp = require("gulp"),
    htmlmin = require("gulp-htmlmin"),
    cssmin = require("gulp-minify-css"),
    jsmin = require("gulp-uglify"),
    rev = require("gulp-rev-append");

gulp.task("html", function() {
    var options = {
        removeComments: true, //清除HTML注釋
        collapseWhitespace: true, //壓縮HTML
        collapseBooleanAttributes: true, //省略布爾屬性的值  ==> 
        removeEmptyAttributes: true, //刪除所有空格作屬性值  ==> 
        removeScriptTypeAttributes: true, //刪除

參考：

Duo
artTemplate
gulp

云服務器 GPU云服務器前端項目前端項目視頻前端開發項目 web前端項目

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

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

前端JSer裝逼手冊(轉)

摘要：在裝逼成本越來越高的圈，是時候充值一下了題記開發是標配，美其名曰提高開發體驗什么你還在用趕緊給我換編輯器，三選一雖然很想用，但一定要忍住，并且與人解釋道啟動速度慢，消耗資源多，不適合我這種完美主義者如果不是為了美觀，我寧愿使用命令行二逼在裝逼成本越來越高的 JS 圈，是時候充值一下了 ———— 題記 § 開發 Macbook Pro 是標配，美其名曰提高開發體驗什么？你還在用 S...

xiaowugui666 2019-08-21 14:16 評論0 收藏0
前端 JSer 裝逼手冊

摘要：在裝逼成本越來越高的圈，是時候充值一下了題記開發是標配，美其名曰提高開發體驗什么你還在用趕緊給我換編輯器，三選一雖然很想用，但一定要忍住，并且與人解釋道啟動速度慢，消耗資源多，不適合我這種完美主義者如果不是為了美觀，我寧愿使用命令行二逼在裝逼成本越來越高的JS圈，是時候充值一下了 ——題記 § 開發 Macbook Pro是標配，美其名曰提高開發體驗什么？你還在用Spotligh...

vincent_xyb 2019-08-21 14:03 評論0 收藏0
JavaScript開發工具大全

摘要：發布于之后，采用了完全不同的方式，使用函數定義任務。它允許開發者使用它們的補丁和更新來修復這些安全漏洞。提供了工具用于掃描依賴來監測漏洞。是一個開源診斷工具，用于和應用。是和開發的一款新的包管理工具。與相比，它解決了安全性能以及一致性問題。譯者按: 最全的JavaScript開發工具列表，總有一款適合你！原文: THE ULTIMATE LIST OF JAVASCRIPT TOO...

nifhlheimr 2019-08-20 17:34 評論0 收藏0
嵌入式系統開發: LinkIt? Smart 7688 Duo物聯網平臺簡介

覺得文章還不錯的, 右上角的推薦. LinkIt? Smart 7688 Duo 平臺主要針對如下兩個應用場景: 智能家居的家電控制辦公室設備控制什么是聯發科技LinkIt? Smart 7688 開發平臺http://labs.mediatek.com/site... 連接到 LinkIt? Smart 7688 Duo 下面介紹3種連接到 LinkIt? Smart 7688 Duo...

LiuRhoRamen 2019-07-25 11:14 評論0 收藏0