gulp提取html中的script,gulp：将独立css、js文件中的代码注入到html页面中

一般开发的时候咱们习惯单首创建css、js文件，并引入到html中，这样方便对独立的文件进行依赖引用、压缩处理、css预编译等操做。有时候写的css或者js代码不多，单独放一个文件会增长一次请求，这时候比较适合直接把代码放入html页面中，如何将独立的css、js文件中的代码自动注入到html相应的位置呢，咱们用到gulp-inject插件：css

安装：html

npm install --save-dev gulp-inject

引入：web

var inject = require('gulp-inject');

html代码：npm

Document

css代码：(001.insert.css)gulp

.box{

font-size: 18px;

width: 100px;

height: 100px;

border-radius: 50%;

}

js代码：(001.insert.js)ui

console.log('123')

gulp配置：插件

gulp.src('assets/index.html')

// 将指定的独立文件中的内容所有插入到HTML文件中指定的位置

// 能够先利用相关插件将css、js文件处理(丑化压缩、自动前缀等)

.pipe(inject(gulp.src(['temp/css/*.insert.css', 'temp/js/*.insert.js']), {

starttag: '', // ''这是关键，判断插入位置

endtag: '',

relative: true,

transform: function (filePath, file) {

if(filePath.slice(-3) === '.js'){

return ''

}

if(filePath.slice(-4) === '.css'){

return ''

}

// 将文件内容做为字符串返回

return file.contents.toString('utf8')

}

}))

.pipe(gulp.dest('dist/'));

处理后最终的html页面：调试

Document