技术控

    今日:75| 主题:49270
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 如何使用Rollup打包样式文件并添加LiveReload

[复制链接]
銩失Dё愛° 发表于 2016-10-2 17:29:12
141 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
通过这个教程学习如何使用JavaScript打包工具 Rollup 配合PostCSS来取代Grunt或Gulp处理样式文件。
   上一篇文章中,我们完成了 使用Rollup打包前端JavaScript入门 。
  这篇文章包含第二部分和第三部分。
  第二部分会继续在上次的项目中进行,为Rollup添加处理样式的能力,使用PostCSS进行一些转换,让我们能使用更简单的变量写法和嵌套规则等语法糖。
  然后完成第三部分,圆满结束。第三部分将为项目添加文件监听和教程:如何使用Rollup打包样式文件并添加LiveReload,这样每当文件变化时就不用再手动地打包bundle文件了。
  准备工作

   我们会在上周的项目基础上继续进行,因此如果你还没有看上一节,推荐你先看一下。
   注: 如果你没有项目的副本,你可以通过这条命令克隆在第一部分结束这个状态下的项目: git clone -b part-2-starter --single-branch https://github.com/jlengstorf/learn-rollup.git
  如何在你以后的项目中使用Rollup.js: PostCSS

   你可以轻松地处理CSS并注入到文档的 head 中,这取决于你的项目如何配置,也是Rollup另一个优点。
  另外,所有的构建过程都在一个地方,降低了开发流程的复杂度 - 这对我们很有帮助,尤其是在团队协作时。
  不过糟糕的是,我们使得样式依赖JavaScript,并且在无样式HTML在样式注入前会产生一个短暂的闪烁。这对有些项目来说是无法接受的,并且应该通过像使用PostCSS提取等方式解决。
  既然这篇文章是关于Rollup的,那么:来吧。让我们使用Rollup!
   在 main.js 中加载样式

   如果你之前从来没用过构建工具,可能感觉这样有点怪,但请跟着我继续。为了在文档中使用样式,我们不会像平常那样使用 标签,取而代之,我们将在 main.min.js 中使用 import 语句。
   现在在 src/scripts/main.js 开头加载样式:
  [code]+ // Import styles (automatically injected into ).
+ import '../styles/main.css';

  // Import a couple modules for testing.
  import { sayHelloTo } from './modules/mod1';
  import addArray from './modules/mod2';

  // Import a logger for easier debugging.
  import debug from 'debug';
  const log = debug('app:log');

  // The logger should only be disabled if we’re not in production.
  if (ENV !== 'production') {

    // Enable the logger.
    debug.enable('*');
    log('Logging is enabled!');
  } else {
    debug.disable();
  }

  // Run some functions from our imported modules.
  const result1 = sayHelloTo('Jason');
  const result2 = addArray([1, 2, 3, 4]);

  // Print the results on the page.
  const printTarget = document.getElementsByClassName('debug__output')[0];

  printTarget.innerText = `sayHelloTo('Jason') => ${result1}\n\n`;
  printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;[/code]  安装PostCSS插件

  首先需要Rollup版本的 PostCSS插件,使用如下命令安装:
  [code]npm install --save-dev rollup-plugin-postcss[/code]   更新 rollup.config.js

   然后,添加插件到 rollup.config.js :
  [code]// Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss({
+       extensions: [ '.css' ],
+     }),
      resolve({
        jsnext: true,
        main: true,
        browser: true,
      }),
      commonjs(),
      eslint({
        exclude: [
          'src/styles/**',
        ]
      }),
      babel({
        exclude: 'node_modules/**',
      }),
      replace({
        ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
      }),
      (process.env.NODE_ENV === 'production' && uglify()),
    ],
  };[/code]  看一下生成的bundle

  现在我们已经能够处理样式了,可以看一下新生成的bundle,看看它是如何工作的。
   运行 ./node_modules/.bin/rollup -c ,然后看一下生成的 build/js/main.min.js ,在文件开头几行,可以看到一个名叫 __$styleInject() 的新函数:
  [code]function __$styleInject(css) {
  css = css || '';
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
}
__$styleInject("/* Styles omitted for brevity... */");[/code]   简单地说,这个函数创建了一个
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表