Gulp4 前端自动化工作流配置

栏目: 编程工具 · 发布时间: 5年前

内容简介:随着最近把 nodejs 从于是趁此机会,把 Gulp 升级为现已经发布至 Github 和 NPM 作为不定期维护的一个项目。关于后续更新和维护情况,请关注本项目的:

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

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

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

简介(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)

MIT


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Linux命令行大全

Linux命令行大全

绍茨 (William E.Shotts) / 郭光伟、郝记生 / 人民邮电出版社 / 2013-3-1 / 69.00元

《Linux命令行大全》主要介绍Linux命令行的使用,循序渐进,深入浅出,引导读者全面掌握命令行的使用方法。 《Linux命令行大全》分为四部分。第一部分开始了对命令行基本语言的学习之旅,包括命令结构、文件系统的导引、命令行的编辑以及关于命令的帮助系统和使用手册。第二部分主要讲述配置文件的编辑,用于计算机操作的命令行控制。第三部分讲述了从命令行开始执行的常规任务。类UNIX操作系统,比如L......一起来看看 《Linux命令行大全》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具