gulp工作流,html/js/css监测自动刷新、sass

gulp工作流

一.下载所有依赖包:

npm install

以下插件可能需要单独下载下:

npm install gulp-spritesmith

二.进入开发模式:

gulp dev

1.监测html/js/css文件,浏览器自动刷新:使用browserSync插件
2.sass自动编译
3.sprite雪碧图自动生成:请向images/sprite文件夹添加或删除一个icon,触发gulp sprite任务,自动更新sprite.png及sprite.scss

三.进入打包模式,所有文件都将打包到dist目录:

gulp build 1.usemin自动生成并引用压缩文件(js/css生成带md5后缀的.min文件)
2.images文件夹图片压缩
3.小图片build后使用base64(详见build后的首页示例)

注意:如果需要单项目使用(即根目录下生成静态资源)projectName和publicPath需设置为空,即:

var projectName = '', publicPath = '';

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。