gulp插件封装 gulp-pack

码农软件 · 软件分类 · Node.js 扩展 · 2019-04-14 09:43:04

软件介绍

针对前端开发过程中最常用的需求,我们把一系列gulp插件封装成为一个简单的命令。

目前包含以下功能,以后还会继续增加:

  • 简易的服务器(webserver)

  • 页面自动刷新(livereload)

  • 自动补全CSS前缀(autoprefixer,默认不开启)

  • CSS预处理(stylus,默认不开启)

gulp-pack会被安装在全局目录,而不是你的项目目录下。

也就是说,你的项目中不会出现令人讨厌的node_modules文件夹。

安装(全局)

npm install -g gulp-pack

启动

在命令行中定位到你的项目目录,然后执行如下代码:

pack

或者要也可以指定路径

pack pages/

然后会看到如下内容:

D:\Git\test>pack
[10:28:49] Webserver started at http://localhost:3001
监控js和html
监控css
工具已就绪,耗时507毫秒

命令行参数

usage: gulp-pack [path] [options]
options:
-p               Port to use [3001]
-l --livereload  Livereload Port to use [4001]
-h --help        Print this list and exit.
-v --version     Print version.

package.json配置(可选)

默认情况下,你并不需要进行配置。

通过在package.json中加入pack属性,可以自定义以下选项:

  • http ---- 简易Web服务器的端口,关闭该项功能请设置false

  • livereload ---- 自动刷新页面,关闭该项功能请设置false

  • autoprefixer ---- 自动补全css属性前缀,关闭该项功能请设置false

  • open ---- 是否在启动服务后自动打开浏览器,默认关闭

  • watch ---- 要监控的各文件类型的路径,关闭该项功能请设置false

  • stylus ---- 是否监听.styl类型的文件,默认关闭

如果你的目录中还没有package.json文件,可在命令行中输入npm init,然后一直按回车即可自动生成。

本文地址:https://www.codercto.com/soft/d/3547.html

理解专业程序员

理解专业程序员

(美)杰拉尔德·温伯格(GeraldM.Weinberg) / 刘天北 / 清华大学出版社 / 2006-7 / 25.00元

《理解专业程序员》通过行内专家的独特视角,介绍了如何成为优秀程序员,如何提高工作绩效等问题。全书由多篇讨论程序员职业的短文组成,内容精彩绝伦,是一部任何在这个变化急剧的领域工作的人都不可错过的重要作品。本书论述生动翔实——你肯定能从中认出你自己和你的公司的故事——因此不仅极富教益,而且读来也引人入胜。 各篇主题包括:对于专业程序员重要的若干问题,成为专业程序员的途径,在企业官僚体......一起来看看 《理解专业程序员》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具