寻求Gulp实现方案：将预编译CSS注入运行时执行的JS函数

嘿，我之前刚好折腾过一模一样的需求！这就给你一套现成的Gulp配置方案，能精准实现把build/index.css里的样式，打包成自执行的JS函数，最终注入到dist/index.html里。

第一步：安装依赖包 #

首先得装几个必要的Gulp插件，打开终端跑这个命令：

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

• gulp：核心构建工具
• gulp-replace：用来转义CSS里的特殊字符，避免JS语法报错
• gulp-html-replace：把生成的JS代码替换到HTML指定位置
• gulp-concat：辅助拼接内容（用来把JS模板和CSS内容拼在一起）

第二步：编写Gulp配置文件 #

在项目根目录创建gulpfile.js，把下面的代码粘进去：

const gulp = require('gulp');
const replace = require('gulp-replace');
const htmlReplace = require('gulp-html-replace');
const concat = require('gulp-concat');

// 处理CSS，转成自执行JS函数
gulp.task('css-to-js', function() {
  return gulp.src('build/index.css')
    // 转义JS里的特殊字符：换行、单引号、双引号
    .pipe(replace(/\n/g, ''))
    .pipe(replace(/'/g, "\\'"))
    .pipe(replace(/"/g, '\\"'))
    // 把CSS内容插入到自执行JS模板里
    .pipe(concat('inject-style.js'))
    .pipe(replace(/(.*)/, "(function(){ var style = document.createElement('style'); style.textContent = '$1'; document.head.appendChild(style); })();"))
    .pipe(gulp.dest('.tmp')); // 临时存储处理后的JS
});

// 处理HTML，注入生成的JS
gulp.task('build-html', function() {
  return gulp.src('build/index.html')
    // 在HTML里插入生成的JS（这里用<!-- inject:style -->作为占位符）
    .pipe(htmlReplace({
      'style': '.tmp/inject-style.js'
    }))
    .pipe(gulp.dest('dist'));
});

// 组合任务，一键执行
gulp.task('build', gulp.series('css-to-js', 'build-html'));

第三步：给HTML加占位符 #

修改你的build/index.html，在<head>标签里加个占位符，这样Gulp知道把JS插在哪里：

<!DOCTYPE html>
<html>
<head>
  <!-- inject:style -->
  <!-- endinject -->
</head>
<body>
  <div> <!-- content here --></div>
</body>
</html>

第四步：执行构建 #

在终端跑这个命令：

gulp build

最终效果 #

打开dist/index.html，你会看到<head>里多了一段自执行的script：

<script>(function(){ var style = document.createElement('style'); style.textContent = 'div { background:red; } /* more rules */'; document.head.appendChild(style); })();</script>

这段JS会在页面加载时自动创建style标签，把CSS内容塞进去，完全符合你的需求！

内容的提问来源于stack exchange，提问作者dgo