1. 程式人生 > >使用useref合併html中零散的js和css檔案

使用useref合併html中零散的js和css檔案

安裝:

$ 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。