gulp简单入门

环境准备

1、安装gulp

npm install -g gulp

2、为项目安装依赖

npm install gulp --save-dev

3、创建gulpfile.js
在项目根目录下创建该文件。

编写gulp任务

首先先安装需要的包

npm install gulp-md5-plus --save-dev
npm install del --save-dev

然后就是编写任务文件了。

var gulp = require('gulp');
var md5 = require("gulp-md5-plus");
var del = require('del');

gulp.task('default',['html','js','css'], function() {
    // 将你的默认的任务代码放在这
    console.log(11)
});
gulp.task('js',['html'],function(){
    return gulp.src('./apps/**/*.js',{base:'./'})
        .pipe(md5(10,'./dist/**/*.html'))
        .pipe(gulp.dest('dist'))

})
gulp.task('html',['del'],function(){
    return gulp.src('./apps/**/*.html',{base:'./'})
        .pipe(gulp.dest('dist'))
})
gulp.task('css',['html'],function(){
    return gulp.src('./apps/**/*.css',{base:'./'})
        .pipe(md5(10,'./dist/**/*.html'))
        .pipe(gulp.dest('dist'))
})
gulp.task('del',function(){
    return del(['./dist'])
})

这里我们主要用到del来删除文件，gulp-md5-plus是生成md5后缀名文件的。
gulp.src(‘./apps/*/.css’,{base:’./’})
参数base是生成文件的时候能按目录逐级生成
这样一个简单的处理前端文件就完成了。可以防止浏览器缓存js或者css文件。对于每次更改的文件都会重新生成md5后缀名文件，未改变的则不生成。浏览器还可以使用缓存文件。