duo, gulp 管理前端项目

Jackwoo 发布于2019-08-21 10:43 / 712人阅读

摘要：结合的学习，用最适合练手。目的用，管理前端项目这里面用到了引用库引用本地库支持加载的都可以用引用本地模板引用其它库这里面，将插入模板，将替换为哈希值。写下模板内容基本完成了。在项目目录下执行会生成。

这几天看了几个前端包管理器：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

云服务器服务器托管前端项目前端项目视频前端开发项目 web前端项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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