gulp.task('indexHtml', function() {
return gulp.src('index.html')
.pipe(cheerio(function ($) {
$('script').remove()
$('link').remove()
$('body').append('<script src="app.full.min.js"></script>')
$('head').append('<link rel="stylesheet" href="app.full.min.css">')
}))
.pipe(gulp.dest('dist/'))
})
在前端项目中写样式，往往会根据不同的情况给 DOM 元素不同的样式类来实现一些效果。用 React 项目举例，比如定义一个按钮：
再比如定义一个元素是否被激活：
区分这种样式常规的写法：
这种写法让人感觉非常的啰嗦，不优雅。而且如果判断条件和存在的样式类特别多，会写的很长很恶心。
如最常见的 Button 组件，它会有不同的样式、尺寸、显示方式、ghost 等等，这时候使用拼接和判断语句的方式都显得特别麻烦。
此时 classnames 闪亮登场！下面是它的用法：
classnames 很好的解决了按需使用不同样式类的问题。下面是一个 React 例子：
前后对比，明显优雅了很多。
回到按钮的问题，有了 classnames 就可以很好的解决样式类拼接麻烦的问题了。
墙裂推荐 classnames！
