duo, gulp 管理前端項目

時間 2019-12-12

原文原文鏈接

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

目的：用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);

這裏面用到了：css

引用github庫：uidhtml
引用本地庫：template.js（支持AMD加載的均可以用）前端
引用本地模板：content.htmljava
引用其它庫：jquerynode

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="wrapper"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="build/index.js?rev=@@hash"></script>
</body>
</html>

這裏面，wrapper將插入模板，rev=@@hash將替換爲哈希值。jquery

寫下模板內容：git

tmpl/content.html

<div>
    Hello, {{user}}! Your ID is: {{uid}}
</div>

基本完成了。github

在項目目錄下執行：gulp

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, //省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
        minifyJS: true, //壓縮頁面JS
        minifyCSS: true //壓縮頁面CSS
    };
    gulp.src(['src/**/*.html', '!src/tmpl/*.html', '!src/components/**/*.html'])
        .pipe(rev())
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dest'));
});
gulp.task('css', function() {
    gulp.src('src/**/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dest'));
});

gulp.task('js', function() {
    gulp.src('src/build/**/*.js')
        .pipe(jsmin())
        .pipe(gulp.dest('dest/build'));
});

gulp.task('image', function() {
    gulp.src('src/images/*')
        .pipe(gulp.dest('dest/images/'));
    gulp.src('src/static/**/*.{png,jpg,gif}')
        .pipe(gulp.dest('dest/static'));
});

gulp.task('default', ['image', 'html', 'css', 'js']);

dest/index.html

<script src="build/index.js?rev=88932f41b1ece4b995c4f6adc34deed3"></script>

參考：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。