系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前端构建大法 Gulp 系列 (四):gulp实战 在上一篇 前端构建大法 Gulp 系列 (一):为什么需要前端构建 中,我们说了为什么需要前端构建,简单一句话,就是让我们的工作更有效率. 相信熟悉前端的人对Grunt一定不陌生,实际上我自己之前的很多项目也是在用Grunt, Grunt的…

当然,gulp不仅仅能转换Sass,这里会提到如下转换: jsx转换成常规的JavaScript(说到jsx,玩过react的同学应该是知道的) es6转换为es5 Less,Sass转换为CSS 首先,新建一个文件夹,然后继续和之前的方法一样,在文件夹里npm init , npm install --save-dev gulp 安装好了gulp之后,我们还需要安装几个用来代码转换的插件,对应关系如下: jsx代码转换   npm install gulp-react es6代码转换   np…

var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀 rename = require('gulp-rename'), //文件重命名 sass = require('gulp-sass'), //sass的编译 minifycss = require('gulp-minify-css'), //压缩css uglify = require('gulp-uglify'), //压缩…

抛开Grunt,又有一个新的自动化构建系统成为新的领跑者.那就是Gulp. Gulp是一种直观.自动化构建的工具. 为什么前端er会这么感兴趣Gulp?我相信大家都有个思想:要么不做事,要做事就要把事情做得最好! Gulp就是帮你把前端的事情做好的一个工具!Gulp是基于Node和NPM,安装教程点这里. 什么是Gulp? Gulp使用了node.js的流控制系统,使其(Gulp)构建更快,因为它不需要将临时文件/文件夹写入磁盘. 如果你想了解更多关于流控制系统——尽管这不是必要的——这篇文章页…

什么是gulp?   基于node的自动化构建工具   扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段        开发阶段:源文件不会被压缩            部署阶段:所有文件需要压缩 .gulp能干什么? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 ........... .怎么安装gulp?   因为它基于nodeJS,因此需要先安装node环境   安装完成后,打开你的命令…

gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键打开命令行工具;下图表示node已经装好 2.现在想要做这样一个功能 如上图: button.less中的颜色依赖于color.less 需要实现: 将两个less文件合并,而且生成css文件到css文件夹中: 新建文件index.less,合并两个less文件 这时候就要用到gulp 3.安装gu…

Gulp是一个工具.用于项目构建. Gulp简介: 多个开发者共同开发一个项目,每位开发者负责不同的模块,这就会造成一个完整的项目实际上是由许多的“代码版段”组成的: 使用less.sass等一些预处理程序,降低CSS的维护成本,最终需要将这些预处理程序进行解析: 合并css.javascript,压缩html.css.javascript.images可以加速网页打开速度,提升性能: 这一系列的任务完全靠手动完成几乎是不可能的,借助构建工具可以轻松实现. 所谓构建工具是指通过简单配置就可以帮我…

按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.less') 这是一个最简单的表达式,它选中并且输出'src/less'目录下的index.less文件. 接下来我们来看它的官方解释:输出符合所提供的匹配模式或者匹配模式的数组的文件.返回一个vinyl files的stream它可以被piped到别的插件中. glob:Match files us…

Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端 代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多 强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们 可以做一个对比: Grunt: sass: { dist…

1.使用gulp的步骤 1.安装node检测是否安装好 cmd->node -v2.安装gulp 可以在npm或者在cnpm3.在node里面有个文件package.json.利用命令行npm init4.本地安装插件,在这个文件夹中,直接在npm下载下来5.在文件夹中新建一个gulpfile.js(名字必须是这个),其他的代码都是写在这个xxx.js的文件中的 2.基本语法gulp.task("defult",function(){        return gulp.src…