gulp 开发环境

快速生成 gulp 前端开发环境

1. 使用 typescript 重构了 cli 基础功能;
2. 优化了项目生成模式;
3. 使用 typescript 重构了 gulp 基础模板;
4. 优化了 gulp 环境加载速度，优化了雪碧图、sass、imagemin 等插件;
5. 解决了 node 版本过高无法使用的问题。

全局安装 wwgulp

本项目还是建议使用淘宝镜像 cnpm，因为图片优化插件 gulp-imagemin 在使用 npm 和 yarn 安装的时候都会出现超时的情况。如果使用淘宝镜像，下文中的 npm 均可使用 cnpm 替换。

npm i wwgulp -g

Mac 下需要管理员权限来安装

sudo npm i wwgulp -g

创建基础 gulp 模版

wwgulp create <projectname>

输入项目基本信息即可生成 gulp 基础模板

该命令和 vue-cli 创建 vue 应用的命令相同，其中的 projectname 为项目名称

gulp 模版操作

npm 有如下一些命令可供使用

"dev": "gulp",
"start": "gulp",
"build": "gulp build",
"preview": "gulp preview",
"imgmin": "gulp imgminFn",
"clean": "gulp clean",
"tasks": "gulp --tasks",
"tscdev": "tsc --watch"

npm run dev      // 启动开发环境（不进行图片优化）
npm start        // 启动开发环境（不进行图片优化）
npm run build    // 打包代码生成交付项目assets（包含图片优化）
npm run preveiw  // 预览打包生成的项目
npm run imgmin   // 优化图片
npm run clean    // 删除打包的asstes
npm run tasks    // 列出所有的gulp task
npm run tscdev   //typescript开发模式，用以gulp开发

日常开发中使用npm start启动开发环境，开发完成后运行npm run build打包项目生成 asstes，当然你也可以npm run preview预览打包以后的项目以确认最终效果。