gulp学习日记之gulp-inline-source

gulp如何把独立less文件编译成css后嵌入到html页面，变成嵌入式样式表？

方案1：通过 gulp-replace 替换 link

（1）首先 html 页面中应该有对应 css 文件的 link 标签
（2）通过 gulp 把 link 标签替换成 style 标签的，并添加对应的 css 内容

方案2：直接使用 gulp-inline-source

gulpfile.js

 let gulp = require('gulp');   
let inlinesource = require('gulp-inline-source');
gulp.task('default', function () {
return gulp.src("src/*.html")    //html文件位置
           .pipe(inlinesource())
               .pipe(gulp.dest("dist"));//输出位置
});

test.js

function hello(){console.log("hello")}

test.css

h1{
    font-size: 24px;
    color: red;
}

html

    
        
        
        
          /*文件位置，一定要加inline*/
    
    
        

            测试
        
            /*文件位置，一定要加inline*/
    

输出效果

 
   
 
 
 
测试