gulp browserify前端模組化

2021-08-10 21:02:01 字數 2772 閱讀 4660

包括js模組化,js壓縮,css壓縮,html模組化等。

1.目錄結構

原內容1

原內容2

原內容3

原內容4

原內容5

原內容6

上一步下一步

3.gulpfile.js

var gulp = require("gulp");

var babel = require("gulp-babel");

var watch = require("gulp-watch");

var htmlreplace = require('gulp-html-replace');

var fs = require("fs");

let cleancss = require('gulp-clean-css');

var concat = require('gulp-concat');

var gulpsync = require('gulp-sync')(gulp);

var gulpbrowserify = require('gulp-browserify');

var browserify = require('browserify');

var babelify = require('babelify');

var sourcemaps = require('gulp-sourcemaps');

var source = require('vinyl-source-stream');

var buffer = require('vinyl-buffer');

var standalonify = require('standalonify');

var uglify = require('gulp-uglify');

gulp.task('default',gulpsync.sync(['babel', 'minify-css', 'mytpl', 'browserify']),function () );

//監聽檔案是否修改

gulp.task('watch', () => );

gulp.task("babel", function () , output: }))

.pipe(gulp.dest("dist"));

});gulp.task('gulpbrowserify', function() )

.pipe(gulpbrowserify())

//.pipe(babel())

.pipe(gulp.dest('dist'))

});gulp.task('browserify', function() );

return b.plugin(standalonify,

}).transform(babelify, )

.bundle()

.pipe(source("main.js"))

.pipe(buffer())

.pipe(uglify(, output: }))

.pipe(sourcemaps.init())

.pipe(sourcemaps.write("."))

.pipe(gulp.dest("./dist"));

});var staticize = catch (err)

}};gulp.task('mytpl', function()

gulp.src('src/index.html')

.pipe(htmlreplace(data))

.pipe(gulp.dest('dist'));

});gulp.task('minify-css', () => ))

.pipe(gulp.dest('dist'));

});

4.package.json

,

"scripts": ,

"author": "",

"license": "isc",

"description": ""

}

5.foo.js

let variable = 8;

let sum = (a, b = 6) => (a + b);

let square = (b) => ;

module.exports.variable = variable;

module.exports.sum = sum;

module.exports.square = square;

6.main.js

var bar = require('./foo')

console.log(bar); // object

console.log(bar.variable); // 8

console.log(bar.sum(1)); // 7

console.log(bar.square(5)); // 25

$(function() )

7.index1.tpl

模版1

8..babelrc

備註

js N秒前,N分鐘前,N小時前,N天前,N月前

注意 我對原方法做了稍微改動,之前引數是時間戳,我改成了時間 然後在下面又轉換成了時間戳,因為我資料庫返回的就是時間 timeago datetime var minc diffvalue minute 計算時間差的分,時,天,周,月 var hourc diffvalue hour var day...

Java 幾分鐘前 幾小時前

由於專案需求,展示文章的建立時間格式為 幾分鐘前,幾小時前。補充 未超過一小時展示幾分鐘前 未超過24小時展示幾小時前 超過24小時展示實際時間。public string showlivinglist else if differencevalue 3600000 else map.put tim...

前向星和鏈式前向星

我們首先來看一下什麼是前向星.前向星是一種特殊的邊集陣列,我們把邊集陣列中的每一條邊按照起點從小到大排序,如果起點相同就按照終點從小到大排序,並記錄下以某個點為起點的所有邊在陣列中的起始位置和儲存長度,那麼前向星就構造好了.用len i 來記錄所有以i為起點的邊在陣列中的儲存長度.用head i 記...