博客已迁移至http://zlwis.me. 很早就听说过BrowserSync,也看过一些相关文章,可就是没用过.之前一直在用Gulp开发项目,每次编写完Sass后还要用按F5刷新页面看效果,想想也是够傻的,这么好用的东西竟然现在才开始用. BrowserSync可以同时同步刷新多个浏览器,更神奇的是你在一个浏览器中滚动页面.点击按钮.输入框中输入信息等用户行为也会同步到每个浏览器中. 安装browser-sync模块 npm install browser-sync -g 命令行直接使用 b…

最近花一点时间学了下 gulp,顺便学了下 sass,因为工作中并不需要用(我比较希望学习是需求驱动),所以一直拖到现在才学.突然觉得学习这类工具性价比很高,半天一天即可上手,技能树丰富了(尽管可能只会 20%,但是可以完成 80% 的工作了啊!),简历丰富了,所以才有这么多 前端er 不屑数据结构和算法这些基础吧,毕竟投入产出比太低,学一个简单的算法的时间都够掌握两遍基本的 gulp 工作流了! 言归正传,今天要讲的是 gulp 的增量编译.在编译的过程中,有没有发现很多不必要的编译呢? 我们…

使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch方法比较类似,都是监控文件的改动来触发一些操作.在gulp中我们可以把一个完整的任务拆分成很多个局部任务,然后使用gulp.watch对这些局部任务进行监听,例如: gulp.task('build-js1', ...); gulp.task('build-js2', ...); gulp.task…

gulp的pipe方法是来自nodejs stream API的,并不是gulp本身源码所定义的. 一.pipe方法的作用 pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流(readableStream). 返回的是由从这些文件而来的流(stream) 既然是Stream,自然…

Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/app.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('…

gulp-cssmin:  css压缩 gulp-uglify: js压缩混淆 gulp-imagemin: 图片压缩 gulp-htmlmin: html压缩 gulp-concat: 文件合并 gulp-sass: sass文件转换 gulp-less: less文件转换  …

Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当使用browsersync后,任何一次代码保存,以上的设备都会同时响应文件的改动.效果如下: (图片来自:http://www.browsersync.cn/ ) 如何使用? 1.安装Node.js BrowserSync是基于Node.js的, 是一个Node模块,Node.js可以从官网下载,当…

在Gulp中使用BrowserSync 2016-02-24 23:47 by 那时候的我, 116 阅读, 0 评论, 收藏, 编辑 博客已迁移至http://lwzhang.github.io. 很早就听说过BrowserSync,也看过一些相关文章,可就是没用过.之前一直在用Gulp开发项目,每次编写完Sass后还要用按F5刷新页面看效果,想想也是够傻的,这么好用的东西竟然现在才开始用. BrowserSync可以同时同步刷新多个浏览器,更神奇的是你在一个浏览器中滚动页面.点击按钮.输入框…

一.node 1.什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码.JS由ES(ECMAScript),DOM,BOM 组成,目前运行在浏览器内核中,NODE中只能运行ECMAScript,无法使用DOM,BOM. NODE就是一个JS运行环境.主要用于开发WEB应用程序开发,很多前端开发的工具都是基于NODE这个平台,所有的工具就相当于一些软件. 2.什么…

http://www.cnblogs.com/2050/p/4198792.html   这篇文章很全面的讲解了gulpjs的使用 https://www.jianshu.com/p/9723ca2a2afd   gulp入门 http://blog.csdn.net/beverley__/article/details/55213235   gulp自动更新的配置项.打包上线 https://www.cnblogs.com/2050/p/4198792.html#part4   gulp的使用…