关键词：
Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具。
全局安装 npm install -g gulp
1、本地安装gulp
进入项目根目录执行npm install gulp --save-dev（添加--save-dev会在package.json记录依赖关系）
2、任务清单
在项目根目录中创建gulpfile.js（这是一个配置文件）
3、定义任务
在gulpfile.js定义构建任务，如压缩、合并，Gulp自身并不执行任何任务，是通过调用具体插件来完成的。
以编译LESS为例，安装npm install gulp-less，如下图定义任务
4、执行任务
输入命令 gulp less
这样我们的LESS文件便会编译成CSS了。
1.1.1 Gulp API
Gulp是基于NodeJS的，通过require可以引入一个NodeJS的包（模块），其作用类似于浏览器中的script标签引入资源，被引入的包存放在node_modules目录下。
引入gulp包（模块）后返回一个对象，习惯赋值给变量gulp，通过该对象提供的方法（API）完成任务的配置。
1、gulp.task() 定义各种不同的任务，如下图有两个参数
2、gulp.src() 需要构建资源的路径，字符串或数组（可以正则方式书写）
3、gulp.pipe() 管道，将需要构建的资源“输送”给插件。
4、gulp.dest() 构建任务完成后资源存放的路径（会自动创建）
5、gulp.watch()
//使用方法：在控制台找到gult路径，然后输入gulp dist自动更新
gulp.task("dist",function() {
//自动更新
gulp.watch('src/index.html',['copy']);
//自动转换城css
gulp.watch('src/styles/*.less',['style']);
gulp.watch('src/script/*.js',['script']);
gulp.watch('src/images/*.*',['image']);
gulp.watch('src/*.html',['html']);
});
6.serve
//启动自动化web服务器localhost：3000
var browserSync = require('browser-sync').create();
// Static server
gulp.task('serve',['style', 'script', 'image', 'html','copy'], function() {
browserSync.init({
server: {
baseDir: ['src']
}
});
});
1.1.2 常用Gulp插件
gulp-less 编译LESS文件
gulp-autoprefixer 添加CSS私有前缀
gulp-cssmin 压缩CSS
gulp-rname重命名
gulp-imagemin 图片压缩
gulp-uglify 压缩Javascript
gulp-concat 合并
gulp-htmlmin 压缩HTML
gulp-rev 添加版本号
gulp-rev-collector 内容替换
gulp-useref
gulp-if
gulp-less使用
简介： 使用gulp-less插件将less文件编译成CSS。1、安装gulp-less在命令行里使用npminstallgulp-less--save-dev;2、配置gulpFile.js2.1基本使用vargulp=require(‘gulp‘),//获取gulp模块less=require(‘gulp-less‘);//获取gulp-less插件gulp.task(‘testLess‘, 查看详情
gulp常用插件之gulp-notify使用(代码片段)
更多gulp常用插件使用请访问：gulp常用插件汇总gulp-notify这是一款gulp通知插件。更多使用文档请点击访问gulp-notify工具官网。安装一键安装不多解释npminstall--save-devgulp-notify使用例1：varnotify=require("gulp-notify");gulp.src("./src... 查看详情
gulp的使用方法
gulp的使用方法首先下载插件在gulpfile.js里面写‘搬运‘代码：//得到gulp对象vargulp=require(‘gulp‘);//新建任务gulp.task(‘script‘,function(){//匹配gulp.src(‘./js/index.js‘).pipe(gulp.dest(‘./js/dist‘));//指定输出的**目录**});在gulpfile.js里面写... 查看详情
gulp使用
gulpfile.js:从开发到生产，功能有：压缩合并、添加版本号vargulp=require(‘gulp‘),//引入gulp核心文件包concat=require(‘gulp-concat‘),//-多个文件合并为一个minifyCss=require(‘gulp-minify-css‘),//-压缩CSS为一行rev=require(‘gulp-rev‘),//-... 查看详情
gulp的使用
/*参考代码网址：http://www.ido321.com/1622.htmlhttp://colobu.com/2014/11/17/gulp-plugins-introduction/#gulp-renamehttps://github.com/nimojs/gulp-book*/ gulp的使用//获取gul 查看详情
gulp的使用以及gulp新手入门教程
.../22/gulp-for-beginners/Gulp是一个自动化工具，前端开发者可以使用它来处理常见任务：搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript、压缩图片当然Gulp能做的远不止这些。如果你... 查看详情
gulp使用引导
全局安装npm install –g gulp 安装到本地 npm install gulp –save-dev新建gulpfile.js 编写文件内容并运行var gulp = require(‘gulp‘);gulp 查看详情
gulp常用插件之gulp-beautify使用(代码片段)
更多gulp常用插件使用请访问：gulp常用插件汇总gulp-beautify这是一款使用js-beautify进行资产美化插件。更多使用文档请点击访问gulp-beautify工具官网。安装一键安装不多解释npminstall--save-devgulp-beautify使用这是js-beautify的gulp插件。varbea... 查看详情
gulp常用插件之gulp-uglify使用(代码片段)
更多gulp常用插件使用请访问：gulp常用插件汇总gulp-uglify这是一款使用UglifyJS缩小js文件。更多使用文档请点击访问gulp-uglify工具官网。安装一键安装不多解释npminstall--save-devgulp-uglify使用vargulp=require('gulp');varuglify=require('gul... 查看详情
使用gulp压缩图片
请务必理解如下章节后阅读此章节：安装Node和gulp使用gulp压缩JS压缩图片文件可降低文件大小，提高图片加载速度。找到规律转换为gulp代码规律找到 images/ 目录下的所有文件，压缩它们，将压缩后的文件存放在 dist/ima... 查看详情
gulp常用插件之gulp-useref使用(代码片段)
更多gulp常用插件使用请访问：gulp常用插件汇总gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的... 查看详情
gulp使用
gulp需要全局安装和当前目录都安装才能使用gulp命令安装gulp插件npminstallgulp-revgulp-rev-replacegulp-userefgulp-filtergulp-uglifygulp-csso--save-devgulp-rev：给每个文件添加版本号，根据文件内容计算hash码，修改文件名，避免客户端缓存问题gulp-re... 查看详情
gulp安装及使用
測试环境Mac:10.10.4Gulp:3.9.0时间:2015年08月15日18:07:08安装Gulpsudonpminstall--globalgulpnpminstall--save-devgulp输入gulp-v,显示版本号说明成功安装使用Gulp在项目根文件夹创建gulpfile.js文件vargulp=require(‘gulp‘);//引用gulpgulp.task(‘defaul 查看详情
gulp外挂rename的使用
安装和使用就不详细说了。前面有。gulpfile.js的配置vargulp=require(‘gulp‘),rename=require(‘gulp-rename‘),//记得先下载插件哦uglify=require("gulp-uglify");gulp.task(‘rename‘,function(){gulp.src(‘src/js/main.js‘).pipe(uglify())//压缩. 查看详情
gulp常用插件之gulp-babel使用(代码片段)
更多gulp常用插件使用请访问：gulp常用插件汇总gulp-babel这是Babel的Gulp插件。此自述文件适用于gulp-babelv8+Babelv7检查7.x分支以了解使用Babelv6的文档更多使用文档请点击访问gulp-babel工具官网。安装安装gulp-babel，如果你想获得的下一... 查看详情
gulp常用插件之gulp-rev-collector使用(代码片段)
更多gulp常用插件使用请访问：gulp常用插件汇总gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射,去替换文件名称,也可以替换路径。更多使用文档请点击访问gulp-rev-collector工具官网。安装一键安装不多解释npminstall-... 查看详情
使用 gulp 而不使用全局 gulp //edit: 并且不链接到 bin js 文件
】使用gulp而不使用全局gulp//edit:并且不链接到binjs文件【英文标题】：Usinggulpwithoutglobalgulp//edit:andwithoutlinkingtothebinjsfile【发布时间】：2016-01-0606:03:01【问题描述】：我有一个gulpfile.js，当在命令行中输入gulp时，它可以完美运行。... 查看详情
使用 gulp 构建 SASS 时设置变量？
】使用gulp构建SASS时设置变量？【英文标题】：SetavariablewhilebuidingSASSwithgulp?【发布时间】：2016-09-0711:23:11【问题描述】：我在gulp中使用以下内容从SASS(*.scss)文件构建CSS文件：vargulp=require(\'gulp\'),sass=require(\'gulp-sass\');varcolortheme=\'b... 查看详情