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中去查询。