最近花一点时间学了下 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,自然…

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

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文件转换  …

眼下做前端开发的同学可能都熟悉grunt.fis之类的自己主动化构建工具.事实上在HybridApp开发中我们也能够使用这些工具来简化我们的工作.gulp就是一个比grunt,fis都先进的构建工具.用好gulp能够简化我们的工作流程.提升产品质量.本文会具体的说明我们移动App项目gulp的使用经验.部分关于gulp的介绍来自国外站点. gulp是 Fractal公司公布的一个新的基于nodejs的构建系统,目标是代替Grunt,成为最流行的JavaScript任务执行器. 眼下ionic框架…

之前一直是在vs 2013中使用Cordova来开发移动app(目前有iPad版/iPhone版/安卓版),准备到下一个milestone的时候升级到2015,这两天在尝试各种东西. 2015中的cordova项目和2013结构变化很大,所以需要一个手动迁移过程,这个过程之前已经有同事尝试过了,包括很多插件可能都要重新安装,不同插件的使用可能还有些不太一样. 这两天在研究如何在项目里使用gulp这个前端集成工具,vs 2015支持这个东西是一个非常大的利好,之前很多事情现在都可以自动来做了. g…

整合 streams 来处理错误 默认情况下,在 stream 中发生一个错误的话,它会被直接抛出,除非已经有一个时间监听器监听着 error时间. 这在处理一个比较长的管道操作的时候会显得比较棘手. 这里是一个在 gulpfile 中使用它的例子: var combiner = require('stream-combiner2'); var uglify = require('gulp-uglify'); var gulp = require('gulp'); gulp.task('test…

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html 相关连接导航 在windows下安装gulp —— 基于…