使用useref合并html中零散的js和css文件

来源：互联网发布：程序员写代码没思路编辑：程序博客网时间：2024/06/05 06:39

安装：

$ npm install gulp-useref --save-dev

使用：

var gulp = require('gulp');var useref = require(‘gulp-useref‘);gulp.task(‘useref‘, function(){  return gulp.src(‘app/*.html‘)        .pipe(useref())        .pipe(gulp.dest(‘dist‘));});

在html中需要指明合并后的文件例如：

<html><head>    <!-- build:css css/combined.css -->    <link href="css/one.css" rel="stylesheet">    <link href="css/two.css" rel="stylesheet">    <!-- endbuild --></head><body>    <!-- build:js scripts/combined.js -->    <script type="text/javascript" src="scripts/one.js"></script>     <script type="text/javascript" src="scripts/two.js"></script>     <!-- endbuild --></body></html><!-- The resulting HTML would be: --><html><head>    <link rel="stylesheet" href="css/combined.css"/></head><body>    <script src="scripts/combined.js"></script> </body></html>

执行gulp任务后将在dist目录下生成两个目录，分别是css和js。在css目录下存放着combined.css ，js目录下存放着combined.js。

0 0