nodejs实现简单的gulp打包

最近换了家新公司，由于是创业公司，项目基本从零开始搭建。工作几年，也没想过写点什么技术性的东西，今天突然心血来潮，哦当然，我这个人总是特别容易心血来潮，不定想干点啥，不说废话了，毕竟上班呢，开小差也不太好。忙了一个月，项目初见雏形，也基本可以1.0上线了，趁着等文案的时间，简单写点gulp打包的东西，等明儿有空再来一篇详细的，再有空再来个webpack的，哎呀，这个有空也不知道是啥时候，莫怪，好像又废话了几句。stop，stop。

从头儿来吧，首先创建一个package.json文件，就npm init一直确认确认确认就好了，构建过程中用到什么就npm什么就好了。做过vue脚手架的小伙伴儿应该知道，脚手架会自动生成一个特别全面的package.json文件，当然我们目前也用不到那么多。不多说了。

为了万一以后添加强大的功能，我们就多做几个文件，就不是仅仅一个gulpfile.js了，当然一个也没问题。

来创建一个gulpfile.config.js来专门放置文件路径引用输出等。就是所谓的src，dist。再来一个gulpfile.xxx.js，名字随便起吧，引用的时候引用对就好了。再来一个gulpfile.js吧，最后要运行啊。

做个最简单例子，以js压缩为例，稍后加上版本哈管理功能，用法都差不多，用什么加什么。

var src_file = './xxxx/'; // 你的源文件目录var dist_file= './dist/xxxx/'; // 文件处理后你想存放的目录var config= {src: src_file,dist: dist_file,js: {  src: src_file + 'src/js/**/*.js',      // 你的js目录  dist: dist_file + 'src/js',         // js文件打包后存放的目录  },};module.exports = config;

这只是个最简单的小例子，要是有其它的往里加就好了，html，css，img，还有一些静态文件等。

关键的来了，我们把处理方法写在gulpfile.xxx.js里面。

gulpfile.xxx.js：

var gulp = require('gulp');var rename = require('gulp-rename'); //重命名var babel = require("gulp-babel");var uglify = require('gulp-uglify'); //js压缩var config = require('./gulpfile.config.js');var runSequence = require('run-sequence');var rev = require('gulp-rev');//版本号管理的一些东西，先写进来吧，懒的在敲了var revCollector = require('gulp-rev-collector');var cssUrl = './dist/xxx/src/css/*.css',   jsUrl = './dist/xxx/src/js/*.js';function haha() {  gulp.task('js', function () {    return gulp.src(Config.js.src)          .pipe(babel())          .pipe(uglify())          .pipe(gulp.dest(config.js.dist));    });  gulp.task('revJs', function(){    return gulp.src(jsUrl)          .pipe(rev())          .pipe(rev.manifest())          .pipe(gulp.dest('dist/xxx/src/js'));  });  gulp.task('revHtml', function () {        return gulp.src(['dist/xxx/src/js/**/*.json', 'chaohuo/*.html']) /*后面本地html文件的路径，可自行配置*/          .pipe(revCollector(            { replaceReved:true }            ))          .pipe(gulp.dest('dist/chaohuo')); /*Html更换css、js文件版本,和本地html文件的路径一致*/  });  gulp.task('dev', function (done) {      condition = false;      runSequence(          ['revJs'],          ['revHtml'],    done);});    gulp.task('default', ['js','dev']);}module.exports = haha;