gulp使用入门

一、gulp是什么？

gulp是一款主流的前端自动化构建工具。
gulp的用处：
1.搭建web服务器。
2.文件保存时自动重载浏览器。
3.使用预处理器如Sass、Less。
4.优化资源，比如压缩css、JavaScript，重命名，压缩图片等。
　　下面划重点了！那么gulp和webpack有啥区别呢？同样都是自动化构建工具。简单地讲，gulp是基于流的自动化构建工具，处理压缩代码很方便，可以按需压缩重命名等，但不包括模块化的功能；webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能，讲究“万物皆是模块”。
具体的差别，有几篇博客讲的很不错，可以参考一下，但是真正体会两者的不同还得依据项目使用才能感受的深刻。
参考博客：
https://www.cnblogs.com/lucio110/p/7549941.html
https://www.cnblogs.com/lovesong/p/6413546.html
两者也可以结合使用，增加工程构建效率。   

二、gulp的使用

1.安装
　　全局安装：npm install -g gulp
　　本地安装：npm install gulp --save-dev （添加–save-dev会在package.json记录依赖关系）
　　全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

2.配置
　　在项目的根目录中创建gulpfile.js（这是一个配置文件）。
　　下面通过一个简单地例子讲解：

var gulp = require('gulp'),
	cssmin = require("gulp-cssmin"),
	less = require('gulp-less'),
	rename = require('gulp-rename'),
	uglify = require('gulp-uglify');


gulp.task('less', function(){
	return gulp.src('./resources/less/*.less')
			.pipe(less())
			.pipe(gulp.dest('./dist/css'));
});
gulp.task('css-min', ['less'], function(){
	gulp.src('./dist/css/*.css')
			.pipe(cssmin())
			.pipe(rename({suffix:'.min'}))
			.pipe(gulp.dest('./dist/css'));
});
gulp.task('js-min', ['css-min'], function(){
	gulp.src('dist/js/*.js')
			.pipe(uglify())
			.pipe(rename({suffix: '.min'}))
			.pipe(gulp.dest('./dist/js'));
});
gulp.task('default',['js-min']);

文件目录如下：

(1) 首先需要安装用到的插件，npm install [插件名] --save-dev
常用插件：
gulp-less　编译LESS文件
gulp-autoprefixer　添加CSS私有前缀
gulp-cssmin　压缩CSS
gulp-rename　重命名
gulp-imagemin　图片压缩
gulp-uglify　压缩Javascript
gulp-concat　合并
gulp-htmlmin　压缩HTML
gulp-rev　添加版本号
gulp-rev-collector　内容替换

(2) 通过require引入gulp和插件。

(3) 定义任务
在gulpfile.js定义构建任务，如压缩、合并，Gulp自身并不执行任何任务，是通过调用具体插件来完成的。
上面的例子中，使用了编译less、压缩css、压缩js和文件重命名的插件。
　　gulp会默认执行 ‘default’ 任务，因此在命令行中输入gulp即可完成打包。(上述代码中每一个插件相互依赖，最终只需要执行default任务，即可将以上所有需要执行的任务执行)
常用API：
gulp.task()　　定义不同的任务
gulp.src()　　构建资源的路径
gulp.dest()　　构建任务完成后，资源存放的路径
gulp.pipe()　　将需要构建的资源“输送”给插件
gulp.watch() 　　监视文件的变化，并执行相应的任务或者函数

如果还需要更深层次的学习，那么要在项目中具体使用。简单的入门就介绍到这儿。博主目前主要还是在用webpack。