npm 包 gleis 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介：

gleis 是一个基于 Webpack 的静态页面打包工具，主要用于解决静态页面工程化，规范化开发及打包产出。该工具支持多 html,css,js 入口，支持 ES6 语法，支持 cssmodule；同时提供了打包时对代码进行 hash 处理，css 自动补全前缀等功能。

该工具易于配置，在项目开发中可以帮助我们快速高效地进行代码打包，提升开发效率。

安装：

通过 npm 源安装：

npm install -g gleis

使用方法：

gleis init 初始化工作目录

在需要初始化的目录下执行：
```
gleis init
```
然后在控制台回答相关问题即可进行相应的初始化。
gleis dev 开发环境编译

在工作目录下执行：
```
gleis dev
```
该命令会开启本地服务器，并会把资源打包在内存中，同时会监听资源变化，当检测到有资源变化时，内存中的资源会自动更新，浏览器页面也会自动刷新。
gleis build 生产环境编译

在工作目录下执行：
```
gleis build
```
该命令会进行代码打包压缩，生成目标代码，并返回相关信息。在生产环境下，我们使用该指令生成的代码会更加高效、稳定，并且也会对代码进行压缩，更加适合上线使用。

常用配置项：

入口

我们需要指定各个入口文件的路径，才能保证代码能够被按照我们的想法进行打包。在 gleis.config.js 文件中进行如下配置：

module.exports ={
    entry:{
        index: './src/index.js',
        about: './src/about.js'
    }
}

以上代码就配置了两个入口 index 和 about，它们分别对应了两个 js 文件：index.js 和 about.js。

输出路径

我们也需要规定输出路径，用于告诉 gleis 打包后的代码应该被输出到什么地方。在 gleis.config.js 文件中进行如下配置：

module.exports ={
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:8].js',
        publicPath: '/'
    }
}

以上代码会将打包后的代码输出到一个名为 dist 的文件夹中，并按照指定的格式进行命名。

处理 css 和图片

gleis 提供了良好的 css 模块化支持和 css 自动化添加前缀。

-- -------------------- ---- -------
-- --------- --- --------------
-------------- - -
    ------- -
        ------ --
            ----- ---------
            ---- -
                - ------- -------------- --
                - ------- ------------- 
                  -------- -
                      -------- ----- -- -- --- ---
                      --------------- ------------------------- -- --- ------ ----
                  - 
                --
                - 
                    ------- -----------------
                    -------- -
                        -------- -
                            ----------------------- -- ---------
                        -
                    -
                -
            -
        --
        -
            ----- ---------------------
            ---- -
            -
                ------- --------------
                -------- -
                    ----------- ---------
                -
            -
            -
        --
    -
-

示例代码：

这里的例子是一个简单的 html+css，通过 gleis 打包输出的文件。

src/index.html

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ------------ -------------
  ----- ---------------- ------------------ ----------------
-------
------
  ---- ------------------- -----------
-------
-------

src/index.js

// 引入样式
import './index.css'

console.log('Hello Gleis')

src/index.css

.hello {
  color: #cc0000;
  font-size: 24px;
  text-align: center;
}

执行命令

在终端运行：

gleis dev

在浏览器中打开 http://localhost:8080/，即可看到页面。

执行下面的命令：

gleis build

会看到代码打包到了 dist 目录中

结束语:

通过此篇文章，相信读者能够学习到如何使用 gleis 工具进行静态页面的快速开发，同时了解了相关配置项和示例代码的写法，本文的内容详尽且有深度，实际操作性强，能够对前端开发的同学有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de047

npm 包 gleis 使用教程

简介：

安装：