Skip to content

gulp工作流,html/js/css监测自动刷新、sass自动编译、图片压缩、小图片生成base64,自动css sprite,使用usemin自动生成引用静态文件的html,并添加md5

Notifications You must be signed in to change notification settings

Lingweifeng/ling.gulp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 = '';

About

gulp工作流,html/js/css监测自动刷新、sass自动编译、图片压缩、小图片生成base64,自动css sprite,使用usemin自动生成引用静态文件的html,并添加md5

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published