Skip to content

Slebee/GulpTemplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gulp工作流模板

这是一个简单的gulp工作流模板,定义了一个src源文件目录与gulp输出目录dist
使用bower管理公用库文件

###使用方式 clone之后使用 $ npm install 安装相关node模块依赖, $ bower install安装bower.json中的依赖库文件
$ gulp开始gulp默认任务,默认将会走一遍普通流程,编译压缩less并合并样式中带有?_spriter后缀的png图片、压缩JS与HTML
$ gulp main开启watch,监控dist文件夹内文件变化,有变化自动刷新页面

###工作流包括

  • HTML压缩
  • JS文件压缩
  • notify提示
  • clean清空文件夹模块
  • 图片压缩
  • css Spriter图合并
  • 文件重命名
  • less编译
  • css压缩
  • connect模块,自动刷新页面用
  • ……

###注意事项 由于gulp-css-spriter默认会将样式文件中background出现的png都合并,出于方便性考虑,我们修改
node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js文件
第48行开始,修改正则替换条件,将条件改为

if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) {
    transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
    return cb(transformedDeclaration,declarationIndex,eclarations);
}
else if(transformedDeclaration.property === 'background' && /\?__spriter/i.test(transformedDeclaration.value)) {
    transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
    var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
    if(hasImageValue) {
      return cb(transformedDeclaration,declarationIndex,eclarations);
    }
}

如此一来只有在样式文件中出现?_spriter的图片才会被合并

About

Gulp工作流模板

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published