脚本宝典收集整理的这篇文章主要介绍了Gulp快速入门教程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废话不多说,一起来看看吧。
gulp
安装Gulp
Gulp是依赖Node的,这里假设你已经安装好了Node,首先我们全局安装一下Gulp:
npm install -g gulp
全局安装完成后,我们再切换到项目的要目录下,执行:
//- 生成一个 package.json,里面是一些常规的配置信息
npm inIT
//- 局部安装 Gulp,并生成包依赖信息于 package.JSON 内的 devDePEndencies
npm install gulp --save-dev
安装Gulp插件
Gulp的任务都是以插件的形式存在的,所以在使用前,需要先安装我们用到的插件到项目目录内,插件的安装命令:
// 多个插件可以用空格分隔
npm install 插件名 --save-dev
Gulp常用插件
- gulp-rename:重命名文件
- gulp-concat:合并文件
- gulp-filter:过滤文件
- gulp-uglify:压缩Js
- gulp-csso:压缩优化CSS
- gulp-htML-minify:压缩HTML
- gulp-imagemin:压缩图片
- gulp-zip:zip压缩文件
- gulp-autoprefixer:自动为css添加浏览器前缀
- gulp-rev:给静态资源文件名添加hash值 unicorn.css => unicorn-d41d8cd98f.css
- gulp-sass:编译sass
- gulp-babel:将ES6代码编译成ES5
配置Gulp
我们需要在根目录下创建一个gulpfile.js文件来配置Gulp,将所有的插件加载进来,文件名必须要是gulpfile.js,否则无论执行,下面是一个gulpfile的示例:
VAR gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
// 通过 require() 载入我们需要用到的插件~
gulp.task('concat', function () {
gulp.src('./scripts/*.js')
.pipe(uglify())
.pipe(concat('jkd.min.js'))
.pipe(gulp.dest('./build/js'));
});
gulp.task('default', ['concat']);
运行Gulp
配置好gulpfile.js文件后,我们就可以运行Gulp进行相关的任务了,使用Gulp命令操作:
// 运行默认的 default task
gulp
// 仅运行 concat 这一个 task
gulp concat
// 运行结果如下:
D:SVNwapm>gulp
[12:03:13] Using gulpfile D:SVNwapmgulpfile.js
[12:03:13] Starting 'concat'...
[12:03:13] Finished 'concat' after 9.1 ms
[12:03:13] Starting 'default'...
[12:03:13] Finished 'default' after 11 μs
D:SVNwapm>gulp concat
[12:03:25] Using gulpfile D:SVNwapmgulpfile.js
[12:03:25] Starting 'concat'...
[12:03:25] Finished 'concat' after 9.54 ms
Gulp API
// 定义一个 task,声明它的名称, 任务依赖, 和任务内容.
gulp.task(name[, deps], fn)
// 读取文件,参数为文件路径字符串或数组, 支持通配符.
gulp.src(globs[, options])
// 写入文件, 作为pipe的一个流程.文件夹不存在时会被自动创建.
gulp.dest(path[, options])
// 监控文件,执行任务.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
Gulp详细API的说明可以查看gulp API docs
最后,附上原文地址:http://www.zcbboke.com/1705.html
以上是脚本宝典为你收集整理的Gulp快速入门教程全部内容,希望文章能够帮你解决Gulp快速入门教程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。