搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 橙子山川 > 让浏览器酷起来?这是一段gulp自动构建代码...

让浏览器酷起来?这是一段gulp自动构建代码...

橙子山川 2018-03-01


当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 让浏览器酷起来?这是一段gulp自动构建代码...

让浏览器酷起来?这是一段gulp自动构建代码...


有点懒得打字了。


好吧,这段代码是干啥的呢?


简而言之,coding is see (所写即所见!)


无须自动刷新浏览器,在code后保存即可自动刷新。


在网上找了下面这个gif图:


让浏览器酷起来?这是一段gulp自动构建代码...

原谅我找到这个不太酷的演示图...


不过,gulp还可以开启服务器,然后利用watch直接监听代码的变化,是不是很ku啊?


这份鸡汤收下了!


目录结构:


- dist
- myprojecte
   -css
   -imgs
   -less
   -js
- gulpfile.js
- packege.json
- node_module


你可根据目录结构,copy运行代码:(包要提前下载好)


const gulp = require('gulp');
const less = require('gulp-less');
const browser = require('browser-sync');
gulp.task('gulpbox',()=>{
   console.info("你正在运行这段任务为gulping的代码")
})
gulp.task('less',()=>{
   return gulp.src('myproject/less/*.less')
           .pipe(less())
           .pipe(gulp.dest('myproject/css'))
           .pipe(browser.reload({
               stream:true
           }))
})
// gulp.task('watch',()=>{
//     gulp.watch('myproject/less/*.less',['less'])
// })
gulp.task('watch',['browserbox','less'],()=>{
   gulp.watch('myproject/less/*.less',['less']);
   gulp.watch('myproject/*.html',browser.reload);
   gulp.watch('myproject/js/*.js',browser.reload)
})
gulp.task('browserbox',()=>{
   browser({
       server:{
           baseDir:'myproject'
       }
   })
})



gulp作用可不止这些哦。


图片太大?js文件太多对http请求优化不友好?less得重新转译?压缩文件?..

它都帮得上忙呢。


这   么   说   明   你   明   白   了   一   点   吧..



至于以上的代码具体意思如何?点击赞赏,说不定我就告诉你呢!



作者介绍:

yixiang / 北 京,毕业于上海理工工业设计系,前端工程师 ,nodejs爱好者,时间管理爱好者,每日一小步,愿与你同行..



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《让浏览器酷起来?这是一段gulp自动构建代码...》的版权归原作者「橙子山川」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注橙子山川微信公众号

橙子山川微信公众号:czcshare

橙子山川

手机扫描上方二维码即可关注橙子山川微信公众号

橙子山川最新文章

精品公众号随机推荐

下一篇 >>

gulp打包工具指南