一、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。