gulp html自动引用,Gulp4 前端自动化工作流配置

随着最近把 nodejs 从 8.x 升级到了 10.x,发现 Gulp3.x 早已经不能兼容新版的 node,并且环境中的部分依赖,也已经被淘汰。

于是趁此机会,把 Gulp 升级为 4.x 版本,并把整个环境重新改造了一下。

现已经发布至 Github 和 NPM 作为不定期维护的一个项目。关于后续更新和维护情况,请关注本项目的:GitHub 和 NPM 。

如果你刚接触 Gulp,可以查看我以前写的文章 Gulp构建前端自动化工作流(Gulp入门介绍)。

简介(Introduction)

简单实用的前端自动化工作流配置,基于 Gulp4.x

Simple and practical front-end automated workflow configuration based on Gulp4.x

特性(Features)

SASS (CSS preprocessor)

图像压缩和转Base64 (Images compress & save base64 image)

JS压缩 (JavaScript compressor)

热加载 (Hot reload)

一套环境多项目共存 (Multi-Project Builds)

目录结构(Directory structure)

+ project_file_name // Project folder(Example)

+ Build // Production folder(Output floder)

- etc...

+ dist // Pevelopment folder(Output floder)

- etc...

+ dist__test // Test folder(Output floder)

- etc...

+ src // Source code

- images // Image folder

- js // Script folder

- lib // CSS/JS library

- scss // Style folder

- project.config.js // Project custom config

- .gitignore // Exclude files from git

- gulp.config.js // Gulp custom config

- gulpfile.js // Gulp config

- package.json // Dependency & Module list

- README.md // Documentation

- yarn.lock // Yarn

环境要求(Pre Required)

如果你已经全局安装了 gulp 请先删除旧版本后再安装

If you've previously installed gulp globally, please remove the old version

$ npm rm --global gulp

# or

$ yarn global remove gulp

全局安装 gulp-cli

Install the gulp command line utility

$ npm install --global gulp-cli

# or

$ yarn global add gulp-cli

安装方式(Installation)

# 安装 - Using npm or yarn

$ npm i ublue-gulp-config

# or

$ yarn add ublue-gulp-config

# 安装依赖 - Install dependency

$ npm install

# or

$ yarn install

使用方法(Used)

# 项目初始化 - Project initialization

$ gulp init

# 环境启动 - Start it

$ gulp

环境切换(Using environment variables)

# 发布测试环境 - Build for test environment

$ gulp init --test

# 发布生产环境 - Build for production environment

$ gulp init --build

# 清理生产目录 - Clean up development or production

$ gulp clean

# 清理指定环境目录 - Clean up the specified environment directory

$ gulp clean --test

开源许可(License)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值