gulp 插件之 gulp-useref 和 gulp-if

時間 2019-12-19

標籤 gulp 插件 useref 欄目 JavaScript 简体版

原文原文鏈接

gulp-useref 和 gulp-if 的簡介：javascript

gulp-useref 插件會將多個路徑不一樣的文件拼接成一個文件，並輸出到相應目錄（https://www.npmjs.com/package/gulp-useref）。css

gulp-if 插件會根據條件判斷是否成立執行相應的操做（https://github.com/robrich/gulp-if）。
html

1、gulp-useref 和 gulp-if 插件的使用java

一、安裝「gulp-useref 和 gulp-if 」插件命令（在終端進入到項目根目錄執行）git

npm install --save-dev gulp-load-plugins gulp-useref gulp-if gulp-uglify gulp-clean-cssgithub

二、在項目根目錄下提供 "gulp-useref" 插件任務配置須要的 src 目錄和源文件（源文件放置到 src 目錄下）npm

mkdir srcgulp

三、在 gulpfile.js 文件中配置使用 "gulp-useref 和 gulp-if "ide

 具體示例：
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'));                                 // 目標文件存放路徑
});

四、修改 src 目錄下的 html 源文件ui

 格式：
        <!-- 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>

五、最後在終端運行 "gulp useref" 命令

PS：若是沒有錯誤提示信息，證實就沒什麼問題了。如今去項目根目錄下看是否生成 "dist" 目錄和目標文件。未完待續。。。。

六、生成的 html 文件內容以下

 <html><head>    <link rel="stylesheet" href="css/combined.css"/></head><body>    <script src="js/combined.js"></script> </body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。