通常开发的时候我们习惯单独创建css、js文件,并引入到html中,这样方便对独立的文件进行依赖引用、压缩处理、css预编译等操作。有时候写的css或者js代码很少,单独放一个文件会增加一次请求,这时候比较适合直接把代码放入html页面中,如何将独立的css、js文件中的代码自动注入到html相应的位置呢,我们用到gulp-inject插件:
安装:
npm install --save-dev gulp-inject
引入:
var inject = require('gulp-inject');
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- inject:FileContent:css -->
<link rel="stylesheet" href="./css/001.insert.css"> <!-- 先引入