gulp实战技巧之日常开发定位样式难？不如试试神器gulp-sourcemaps吧！
为了提高开发效率，我们的项目中可能会使用@import文件引入、stylus、sass、less之类的css预处理器。为了优化代码，可能还会压缩css。这一系列操作就导致了在开发过程中定位问题比较困难的现象。所以，我们需要一款神器来精准定位问题。而本文......
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2020-05-30 - 阅:312 - 积分:0
gulp3实战技巧之利用gulp-file-include实现模板复用，大大提高开发效率！
去年今日，艺灵写了最后一篇关于gulp的实战文章。最近刚好因项目原因，又拾起gulp练手了一把。虽然开发过程中没什么大的问题，毕竟之前是有保存配置环境的。但本着分享精神，艺灵觉得还是有必要继续再写一些关于gulp方面的实战文章。话说，gulp官网......
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2020-05-19 - 阅:755 - 积分:0
一篇文章带你解读传统网页开发和gulp+webpack自动化构建工具开发的优劣
前端更新速度比火箭还快！传统的开发方式逐渐退出历史舞台。新一代构建工具早已到来，使用gulp、webpack、Parcel等可以节省大量的开发时间和提升工作效率，最重要的是说出来也好听点。不会点啥子，都没法出来混了............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-05-19 - 阅:900 - 积分:0
gulp优化篇之gulp-changed只传递已修改文件
昨天我们讲了一个gulp-cached插件，使用后可以只传递更改的文件，节省编译时间。今天将继续分享一款拥有同样功能的插件gulp-changed............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-05-02 - 阅:933 - 积分:0
gulp优化篇之gulp-cached只传递已修改文件减少编译时间
现在我们已经可以成功的压缩js、压缩css、合并文件了。但美中不足的是：每次修改时都会全部更新，哪怕是只修改一个css文件也会导致整个项目重新生成一遍。如果项目文件过多，等待打包的时间就会变得很长，严重影响工作效率............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-05-01 - 阅:1912 - 积分:0
gulp实战技巧之gulp-rename实现文件重命名
前面讲了压缩css和压缩js的教程，通常情况下我们会对压缩后的文件加一个.min的后缀。手动修改文件名的话就太麻烦了，所以我们仍然可以使用自动化构建工具来自动完成............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-30 - 阅:3944 - 积分:0
gulp实战技巧之gulp-connect-php+browser-sync实现自动刷新浏览器
gulp-webserver或gulp-connect都可以实现浏览器自动刷新的功能，但要想跑php服务，就需要另装插件。例如本文中的gulp-connect-php，然后再配合browser-sync一起使用，完美！............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-29 - 阅:981 - 积分:0
gulp实战技巧之gulp-connect自动刷新浏览器
上一篇我们知道可以使用gulp-webserver来解决浏览器自动刷新的问题，这一篇将继续介绍一款同样可以刷新浏览器的插件-- gulp-connect。由于gulp@4.0.0以上版本有所变动，所以直接使用会报错。而本文会提供gulp3x和gulp4x的写法，方便看官练手.........
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-28 - 阅:1409 - 积分:0
gulp实战技巧之gulp-webserver自动刷新浏览器
在传统的网页开发中，我们修改了css或js或页面代码并保存后，要想看到最新效果就需要切换到浏览器并手动刷新页面。刷新会占用我们大量的开发时间，所以我们需要一款高效的自动化刷新工具。而使用gulp-webserver就可以解决自动刷新的问题............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-27 - 阅:2561 - 积分:0
![[源码]gulp实战技巧之gulp-uglify压缩js的demo](https://img.alicdn.com/imgextra/i2/759415648/O1CN01TKp83c1rapV3N1IEx_!!759415648.png "[源码]gulp实战技巧之gulp-uglify压缩js的demo")
gulp实战技巧之gulp-uglify压缩js
前面讲了压缩css的几款插件，这篇就介绍下压缩js的一款插件--gulp-uglify。使用gulp-uglify可以压缩我们的js代码，也可以使用其提供的混淆功能对代码进行简单的混淆，注意是混淆了变量名而已哈............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-26 - 阅:3459 - 积分:0
![[源码]gulp实战技巧之ES6模块化开发踩坑第三弹](https://img.alicdn.com/imgextra/i1/759415648/O1CN01Lh0R9G1rapUtHIkjO_!!759415648.png "[源码]gulp实战技巧之ES6模块化开发踩坑第三弹")
![[源码]gulp-clean-css+gulp-postcss等几款css压缩插件](https://img.alicdn.com/imgextra/i4/759415648/O1CN01CirtDg1rapV1Rocnh_!!759415648.png "[源码]gulp-clean-css+gulp-postcss等几款css压缩插件")
![[源码]gulp实战技巧之gulp-concat文件合并demo](https://img.alicdn.com/imgextra/i1/759415648/O1CN012rpTQA1rapV1GRYR0_!!759415648.png "[源码]gulp实战技巧之gulp-concat文件合并demo")
gulp实战技巧之gulp-concat文件合并
前面的教程中讲到过css @import，这也可以算是一种“文件合并”。但本文会讲gulp-concat，这是一个专门的文件合并工具，可以合并css和js文件............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-26 - 阅:2873 - 积分:0
gulp实战技巧之gulp-clean-css+gulp-postcss等几款css压缩插件
本文会总结自己在以往项目中使用的几款css压缩和添加浏览器厂商前缀相关的插件以及遇到的坑。插件列表如下：gulp-postcss+cssnano、gulp-postcss+postcss-clean、gulp-postcss+postcss-import、gulp-postcss+autoprefi......
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-24 - 阅:1506 - 积分:0
gulp实战技巧之ES6模块化开发踩坑第三弹
昨天我们说了用gulp-js-import或browserify+babelify+vinyl-source-stream的方法来解决浏览器不支持<strong>import</strong>和<strong>export</strong>等语法的问题，今天我们接着用一种新的方式尝试解决问题..........
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-20 - 阅:937 - 积分:0
gulp实战技巧之ES6模块化开发踩坑第二弹
既然在项目中使用ES6了，那么箭头函数、import、export等高逼格的用法自然少不了了。虽然ES6提供了很多新特性，但在使用起来却并不是那么美好............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-19 - 阅:1521 - 积分:0
gulp实战技巧之ES6模块化开发踩坑第一弹
最近在折腾ES6模块化开发，然后发现import、export、module.exports等这些高逼格的写法在浏览器中都跑不起来，安装babel-core、babel-plugin-transform-es2015-modules-umd、browserify等吃是非常的复杂，一坑接一坑。所以本文......
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-04-19 - 阅:1547 - 积分:0
gulp实战技巧之gulp.spritesmith自动化构建精灵图并解决动画时的bug
在网页中使用css-sprite雪碧图可以大大减少图片请求和提升网页加载速度。我们使用gulp.spritesmith来自动化构建精灵图非常节省时间和高效，但是在做动画时却是有bug的！下面，我们来看下如何复现bug和解决吧............
作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2019-03-13 - 阅:1220 - 积分:0