在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):zont/gulp-usemin开源软件地址(OpenSource Url):https://github.com/zont/gulp-usemin开源编程语言(OpenSource Language):JavaScript 92.7%开源软件介绍(OpenSource Introduction):
gulp-usemin
This task is designed for gulp >= 3 and node >= 4.0.
UsageFirst, install npm install --save-dev gulp-usemin Then, add it to your var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var cleanCss = require('gulp-clean-css');
var rev = require('gulp-rev');
gulp.task('usemin', function() {
return gulp.src('./*.html')
.pipe(usemin({
css: [ rev() ],
html: [ htmlmin({ collapseWhitespace: true }) ],
js: [ uglify(), rev() ],
inlinejs: [ uglify() ],
inlinecss: [ cleanCss(), 'concat' ]
}))
.pipe(gulp.dest('build/'));
}); If you need to call the same pipeline twice, you need to define each task as a function that returns the stream object that should be used. gulp.task('usemin', function() {
return gulp.src('./*.html')
.pipe(usemin({
css: [ rev ],
html: [ function () {return htmlmin({ collapseWhitespace: true });} ],
js: [ uglify, rev ],
inlinejs: [ uglify ],
inlinecss: [ cleanCss, 'concat' ]
}))
.pipe(gulp.dest('build/'));
}); APIBlocksBlocks are expressed as: <!-- build:<pipelineId>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
An example of this in completed form can be seen below: <!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->
<!-- build:htmlimport components-packed.html -->
<link rel="import" href="components-a.html">
<link rel="import" href="components-b.html">
<!-- endbuild -->
<!-- build:js js/lib.js -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->
<!-- build:js1 js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
<!-- build:remove -->
<script src="js/localhostDependencies.js"></script>
<!-- endbuild -->
<!-- build:inlinejs -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->
<!-- build:inlinecss -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild --> OptionsassetsDirType: Alternate root path for assets. New concated js and css files will be written to the path specified in the build block, relative to this path. Currently asset files are also returned in the stream. pathType: Default alternate search path for files. Can be overridden by the alternate search path option for a given block. any pipelineIdType: If exist used for modify files. If does not contain string 'concat', then it added as first member of pipeline outputRelativePathType: enableHtmlCommentType: Keep HTML comment when processing jsAttributesType: Attach HTML attributes to the output js file. For Example : gulp.task('usemin', function() {
return gulp.src('./index.html')
.pipe(usemin({
html: [],
jsAttributes : {
async : true,
lorem : 'ipsum',
seq : [1, 2, 1]
},
js: [ ],
js1:[ ],
js2:[ ]
}))
.pipe(gulp.dest('./'));
}); Will give you : <script src="./lib.js" async lorem="ipsum" seq="1"></script>
<script src="./app.js" async lorem="ipsum" seq="2"></script>
<script src="./extra.js" async lorem="ipsum" seq="1"></script> As your built script tag. skipMissingResourcesType: Allows missing resources to be skipped, instead of throwing an error. Use case
We want to optimize
We want our files to be generated in the gulp.task('usemin', function () {
return gulp.src('./app/index.html')
.pipe(usemin({
js: [uglify()]
// in this case css will be only concatenated (like css: ['concat']).
}))
.pipe(gulp.dest('dist/'));
}); This will generate the following output:
Changelog#####0.3.30
#####0.3.29
#####0.3.28
#####0.3.27
#####0.3.26
#####0.3.24
#####0.3.23
#####0.3.22
#####0.3.21
#####0.3.20
#####0.3.18
#####0.3.17
#####0.3.16
#####0.3.15
#####0.3.14
#####0.3.13
#####0.3.12
#####0.3.11
#####0.3.10
#####0.3.9
#####0.3.8
#####0.3.7
#####0.3.6
#####0.3.5
#####0.3.4
#####0.3.3
#####0.3.2
#####0.3.1
#####0.3.0
#####0.2.3
#####0.2.2
#####0.2.1
#####0.2.0
#####0.1.4
#####0.1.3
#####0.1.1
#####0.1.0
#####0.0.2
#####0.0.1
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论