Gulp教程
标签（空格分隔）： 前端学习
很久以前就想了解一下前端的自动化流程，但是一直很迷惑。
现在，参考各路大神的博客和加上自己的理解写出了一些关于gulp的理解。
安装Nodejs
点击访问NodeJS官网，下载nodejs并且安装。
为了确保Node已经正确安装，我们执行几个简单的命令。
node -v
回车（Enter），如果正确安装的话，你会看到所安装的Node的版本号，接下来看看npm。
npm -v
这同样能得到npm的版本号。
安装gulp
全局安装
npm install -g gulp
本地安装
npm install gulp --save-dev
gulp的基础语法
gulp通过gulpfile文件来完成相关任务，因此项目中必须包含gulpfile.js
gulp有五个方法：src、dest、task、run、watch
src和dest：指定源文件和处理后文件的路径
watch：用来监听文件的变化
task：指定任务
run：执行任务
(PS:建议使用本地安装，这样不会污染全局环境)
npm install gulp gulp-less gulp-uglify gulp-imagemin gulp-minify-css gulp-clean gulp-rev gulp-rev-collector gulp-autoprefixer gulp-sequence --save-dev
gulpfile.js的配置
var uglify = require('gulp-uglify'), //压缩js
imagemin = require('gulp-imagemin'), //压缩图片
minifycss = require('gulp-minify-css'), //压缩css
clean = require('gulp-clean'), //清除文件
less = require('gulp-less'), //编译less
rev = require('gulp-rev'), //往css添加md5加密的版本号
revCollector = require('gulp-rev-collector'),
autoprefixer = require('gulp-autoprefixer'), //css3的自动添加前缀
gulpSequence = require('gulp-sequence'),
gulp = require('gulp');
gulp.task('html', function() {
var htmlSrc = "./src/*.html",
htmlDest = "./dest/";
gulp.src(htmlSrc)
.pipe(gulp.dest(htmlDest));
})
gulp.task('image', function() {
var imgSrc = "./src/image/*.*(jpg|png)",
imgDest = "./dest/image/";
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(gulp.dest(imgDest));
})
gulp.task('css', function() {
var cssSrc = "./src/css/*.less",
cssDst = "./dest/css/";
gulp.src(cssSrc)
.pipe(less())
.pipe(minifycss())
.pipe(autoprefixer())
.pipe(rev())
.pipe(gulp.dest(cssDst))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev'));
})
gulp.task('js', function() {
var jsSrc = "./src/js/*.js",
jsDst = "./dest/js/";
gulp.src(jsSrc)
.pipe(uglify())
.pipe(gulp.dest(jsDst))
})
gulp.task('rev', ['css'], function() {
gulp.src(['./rev/rev-manifest.json', './src/*.html'])
//读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector())
//执行文件内css名的替换
.pipe(gulp.dest('./dest/'));
//替换后的文件输出的目录
});
gulp.task('clean', function() {
var cleanDest = "./dest/*";
gulp.src(cleanDest, { read: false })
.pipe(clean());
});
gulp.task('sequence', function(callback) {
// 自定义gulp任务的同步或者异步运行
gulpSequence(['html', 'css', 'js'], 'rev', 'image')(callback);
})
gulp.task('default', function() {
gulp.start('sequence');
});
gulp.task('watch', function() {
// 监听html
gulp.watch('./src/*.html', function(event) {
gulp.run('html');
})
// 监听css
gulp.watch('./src/css/*.less', function() {
gulp.run('css');
});
// 监听image
gulp.watch('./src/image/**/*', function() {
gulp.run('image');
});
// 监听js
gulp.watch('./src/js/*.js', function() {
gulp.run('js');
});
});
项目的目录结构如下图
目录结构.jpg
在cmd命令行下键入命令到达安装gulp插件的目录,然后输入gulp命令，出现如下图，说明配置成功。
gulp命令.jpg
上面的一些gulp的插件使用可以到github中去查询。
