描述在 grunt 中实现主题在线预览 - 问题详情 - 创脉思

解读

面试官抛出“主题在线预览”这一场景，核心想考察两点：

能否把“本地主题包 → 浏览器可访问的实时页面”这条链路用 Grunt 自动化；
是否熟悉国内常见交付场景（内网演示、客户远程验收、设计走查）。
回答时要体现“零配置开箱、一键启停、多人协同”的工程化思维，而不是简单跑一个静态服务器。

知识点

grunt-contrib-connect：内置 Livereload 的静态服务器，支持 自定义端口、主机绑定、HTTPS、CORS；
grunt-contrib-watch：监听主题源文件（scss、js、html、图标字体），触发编译 + 自动刷新；
grunt-contrib-compass / sass / less：把主题样式源文件实时编译为 css；
grunt-open：任务启动后自动拉起默认浏览器访问本地地址，避免手工输入；
grunt-concurrent：把 connect、watch、compile 并行跑，防止阻塞；
grunt-contrib-copy & clean：每次预览前清理旧文件、拷贝最新依赖，保证干净环境；
虚拟主机映射：国内公司常把 local.xxx.com 指向 127.0.0.1，方便设计走查时扫码访问；
局域网 IP 暴露：hostname: '0.0.0.0' 让同网段手机、平板可访问，满足客户现场评审；
版本号注入：通过 grunt-replace 把 package.json 的 version 写入页面，防止缓存干扰；
gzip 中间件：connect-gzip-static 插件可在本地预览阶段就模拟线上压缩比，提前发现体积问题。

答案

安装依赖

npm i -D grunt grunt-contrib-connect grunt-contrib-watch grunt-contrib-compass grunt-open grunt-concurrent grunt-contrib-clean grunt-contrib-copy

theme/
 ├─ src/          // 源码：scss、js、images、fonts
 ├─ dist/         // 编译后产出
 └─ preview/      // 仅用于在线预览的入口 html

Gruntfile.js 核心片段

module.exports = function(grunt) {
  grunt.initConfig({
    clean: { preview: ['dist'] },

    copy: {
      preview: {
        files: [
          {expand:true, cwd:'src', src:'images/**', dest:'dist/'},
          {expand:true, cwd:'preview', src:'*.html', dest:'dist/'}
        ]
      }
    },

    compass: {
      preview: {
        options: {
          sassDir: 'src/scss',
          cssDir: 'dist/css',
          outputStyle: 'expanded'
        }
      }
    },

    connect: {
      preview: {
        options: {
          port: 9000,
          hostname: '0.0.0.0',          // 局域网可访问
          base: 'dist',
          livereload: 35729,
          open: true,                   // 自动打开浏览器
          middleware: function(connect, options, middlewares) {
            // 注入 gzip 中间件，提前验证体积
            var gzip = require('connect-gzip-static');
            middlewares.unshift(gzip(options.base[0]));
            return middlewares;
          }
        }
      }
    },

    watch: {
      scss: {
        files: ['src/scss/**/*.scss'],
        tasks: ['compass:preview']
      },
      html: {
        files: ['preview/*.html'],
        tasks: ['copy:preview']
      },
      options: { livereload: 35729 }
    },

    concurrent: {
      preview: ['connect:preview', 'watch']
    }
  });

  grunt.registerTask('preview', [
    'clean:preview',
    'copy:preview',
    'compass:preview',
    'concurrent:preview'
  ]);
};

启动命令

grunt preview

终端输出：

Running "connect:preview" (connect) task
Started connect web server on http://0.0.0.0:9000

此时PC、手机、平板只要在同一局域网，访问 http://<本机IP>:9000 即可实时预览主题；修改任何 scss 或 html，页面无刷新自动更新，设计走查效率提升 3 倍以上。

国内加分细节

端口冲突自动降级：用 portfinder 插件在 9000~9010 之间动态找可用端口，避免多人协作时抢占；
二维码生成：任务启动后调用 qrcode-terminal 把地址打印成控制台二维码，手机扫码即可；
代理转发：若主题需调用测试环境接口，通过 grunt-connect-proxy 把 /api 代理到 https://test.xxx.com，解决本地跨域；
一键打包：预览无误后执行 grunt build 把 dist 目录直接推送到阿里云 OSS 或腾讯 COS，生成 https://theme-preview.xxx.com/{version}/ 永久链接，方便客户邮件确认。

拓展思考

如果主题包体积超过 50 MB（含高清素材），Grunt 的冷编译耗时会明显拖慢预览，可引入 grunt-newer 做增量编译，或把图片压缩任务拆成预编译阶段，预览阶段只监听样式与脚本。
对于多主题并行开发场景，可给 connect 动态加 middleware，根据 ?theme=dark 参数返回不同 dist/{theme} 目录，实现一键切换主题而无需起多个服务。
在安全合规要求高的金融或政务项目，禁止监听 0.0.0.0，此时可把 hostname 设成 localhost，再通过钉钉内网穿透或花生壳生成 https 临时域名，既满足客户外网访问，又不暴露本地源码。