havefive / front-end-demo

前端工程化实例

前端工程demo

front-end demo

开始之前

首先, 全局安装 Webpack and webpack-dev-server.

$ npm i -g webpack webpack-dev-server gulp

开始使用

$ npm install

$ gulp

使用命令

gulp参数说明

$ gulp help

开始开发,启动浏览器,自动刷新

$ gulp browser-sync

postcss处理生成css

$ gulp css

复制现有的模版

$ gulp tmpl

压缩图片文件

$ gulp imagemin

压缩混淆js

$ gulp js-uglify

打包成zip文件

$ gulp zip

合并压缩替换在html使用的css,js文件

$ gulp merge

模拟json接口数据,根目录data配置json数据

$ gulp mock

合并小图到一张大图

$ gulp sprite

文件附加版本号

$ gulp rev