溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
gulp-useref 和 gulp-if 的簡介：
gulp-useref 插件會將多個路徑不同的文件拼接成一個文件，并輸出到相應目錄（https://www.npmjs.com/package/gulp-useref）。
gulp-if 插件會根據條件判斷是否成立執行相應的操作（https://github.com/robrich/gulp-if）。
一、gulp-useref 和 gulp-if 插件的使用
1、安裝 “gulp-useref 和 gulp-if ”插件命令（在終端進入到項目根目錄執行）
npm install --save-dev gulp-load-plugins gulp-useref gulp-if gulp-uglify gulp-clean-css
2、在項目根目錄下提供 "gulp-useref" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）
mkdir src
3、在 gulpfile.js 文件中配置使用 "gulp-useref 和 gulp-if "
具體示例：
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')(); // 裝載插件
gulp.task('useref', function () { // 自定義 "useref" 任務
return gulp.src('src/*.html') // 模糊匹配 src 目錄下所有 html 文件
.pipe(plugins.useref()) // 調用 gulp-useref 插件
.pipe(plugins.if('*.js', plugins.uglify())) // 調用 gulp-uglify 插件
.pipe(plugins.if('*.css', plugins.cleanCss())) // 調用 gulp-clean-css 插件
.pipe(gulp.dest('dist')); // 目標文件存放路徑
});
4、修改 src 目錄下的 html 源文件
格式：
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
注解：
type：類型，值可以是 css，js，remove。remove 指定將完全刪除構建塊而不生成文件。
alternate search path：備用搜索路徑，可選，替代搜索路徑允許更改。
path：目標文件輸出路徑。
parameters：指定添加到標簽的額外參數。
具體示例：
<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 js/combined.js -->
<script type="text/javascript" src="js/one.js"></script>
<script type="text/javascript" src="js/two.js"></script>
<!-- endbuild -->
</body>
</html>5、最后在終端運行 "gulp useref" 命令
PS：如果沒有錯誤提示信息，證明就沒什么問題了。現在去項目根目錄下看是否生成 "dist" 目錄和目標文件。未完待續。。。。
6、生成的 html 文件內容如下
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="js/combined.js"></script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
