❤
npm
Sign UpSign In

gulp-concat-replace

1.0.5 • Public • Published

gulp-concat-replace NPM version

Concat(js and css) and Replace build blocks in HTML. Like useref but done right.

Table of Contents

Usage

Install:

npm install --save-dev gulp-concat-replace

Put some blocks in your HTML file:

<!-- build:name -->
<script src="./xxx.js" type="text/javascript"></script>
<script src="./xxx1.js" type="text/javascript"></script>
<script src="./xxx2.js" type="text/javascript"></script>
<!-- endbuild -->
 
or
 
<!-- build:name -->
<link rel="stylesheet" type="text/css" href="./xxx.css">
<link rel="stylesheet" type="text/css" href="./xxx1.css">
<link rel="stylesheet" type="text/css" href="./xxx2.css">
<!-- endbuild -->
 

name is the name of the block, and css or js.

API

concatreplace(options)

options

Type: object

  • {String} prefix - 合并和文件名的前缀，默认值："concat".
  • {String} base - 如果页面引入路径是以“/”开始，相对应于gulpfile.js目录，默认“../”.
  • {Object} output - 合并后文件的存储路径，包括css和js的路径（相对于gulpfile.js文件）.默认值：
{"js":"./tmp/js","css":"./tmp/css"}

Example

index.html:

<!DOCTYPE html>
<html>
    <head>
 
    <!-- build:css -->
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/main.css">
    <!-- endbuild -->
 
    </head>
    <body>
 
    <!-- build:js -->
    <script src="/js/player.js"></script> 
    <script src="/js/monster.js"></script> 
    <script src="/js/world.js"></script> 
    <!-- endbuild -->

gulpfile.js:

var gulp = require('gulp');
var concatreplace = require('gulp-concat-replace');
 
gulp.task('default', function() {
  gulp.src('index.html')
    .pipe(concatreplace({
    	prefix:"concat",
        base:"../",
        output:{
        	css:"./build/css",
            js:"./build/js"
        }
    }))
    .pipe(gulp.dest('build/'));//html替换后的目录
});

Result:

<!DOCTYPE html>
<html>
    <head>
 
    <link rel="stylesheet" href="concat1.css">
 
    </head>
    <body>
 
    <script src="js/concat2.js"></script> 
相关目录
|-gulpfile.js
|-build
|--css
|---concat1.css
|--js
|---contact2.js
|-index.html
 

感谢

本插件参考了gulp-html-replace，所以需要感谢Vladimir Kucherenko提供了gulp-html-replace

Readme

Keywords

Package Sidebar

Install

npm i gulp-concat-replace

Repository

github.com/huadong1989/gulp-concat-replace

Homepage

github.com/huadong1989/gulp-concat-replace#readme

Weekly Downloads

76

Version

1.0.5

License

ISC

Last publish

Collaborators

  • hadon
Try on RunKit
Report malware