前端自动化构建之Gulp

Posted on

希望通过Gulp实现的功能

1、静态资源文件(js、css、image)的实时更新。
2、性能优化(css、js文件压缩)。
3、替换(url)。

源代码与构建代码的分离

1
2
3
4
/views
/public
/release
/build

/views 模板页面源代码。
/public 资源文件js、css源代码以及image。
/release 构建以后生成的模板页面。
/build 构建以后生成的资源文件。

js文件相关

1、压缩、混淆js代码。
2、将js文件中的/public替换成CDN的url。
3、给js文件名添加hash并且把映射关系输出到js.manifest文件。
4、把所有js文件中的require引用按照js.manifest进行替换，key替换成value。

gulp-rev会扫描你的js文件信息生成对应的hash，只要有修改，hash就会不一样，以此达到更新实时更新资源文件的目的。
js.manifest

1
2
3
{
  "base.js": "base-358a33152f.js"
}

image文件相关

1、给image文件名添加hash并且把映射关系输出到image.manifest文件。

image.manifest

1
2
3
{
  "logo.png": "logo-358a33152f.png"
}

css文件相关

1、编译less文件。
2、压缩css代码。
3、将css文件中的/public替换成CDN的url。
4、给css文件名添加hash并且把映射关系输出到css.manifest文件。
5、把所有css文件中的图片文件引用按照image.manifest进行替换，key替换成value。

css.manifest

1
2
3
{
  "base.css": "base-358a33152f.css"
}

html模板相关

1、把所有html模板文件中的js、css、image文件分别引用按照js.manifest、css.manifest、image.manifest进行替换，key替换成value。
2、将模板文件中的/public替换成CDN的url。

转载、引用请注明文章出处。