gulpfile学习

gulpfile.js

var gulp = require('gulp');
var fileinclude = require('gulp-file-include'), // 编译公共组件
    proxy = require('http-proxy-middleware')    // 需要安装这个中间件
runSequence = require('run-sequence'),// 同步执行（在所有任务中gulp.src前面加上return为了run-sequence的使用）
    rev = require('gulp-rev'), // 缓存资源文件生成清单文件
    revCollector = require('gulp-rev-collector'), // 从清单文件中搜集数据，更替html文件中链接
    rename = require('gulp-rename'), // 文件重命名
    uglify = require('gulp-uglify'), // 压缩js
    clean = require('gulp-clean'), // 清空文件以及文件夹
    watch = require('gulp-watch'), // 监听文件改变
    connect = require('gulp-connect'), //简单的代理中间件，它可以用gulp-connect启动反向代理服务器
    plumber = require('gulp-plumber'),// 任务出错不中断任务，继续任务
    jshint = require('gulp-jshint')  // js语法监测
    cleanCSS = require('gulp-clean-css') //压缩CSS
    gutil = require('gulp-util');
// 同步浏览器
var browserSync = require('browser-sync').create();
var preprocess = require('gulp-preprocess');
var floder_production = 'production',
    floder_test = 'test';
//定义css、js源文件路径
var cssSrc = 'src/css/*.css',
    jsSrc = ['src/js/*.js'],
    htmlSrc = ['src/pages/**'];
// 编译nav.html和footer._html
gulp.task('fileinclude', function () {
    // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
    gulp.src(['src/pages/**/*.html', '!src/pages/_include/*.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('src/_html'));
});
//检查js语法
gulp.task('jslint', function () {
    return gulp.src(jsSrc)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//清空目标文件
gulp.task('cleanDist', function () {
    return gulp.src(['dist', 'rev'], {read: false})
        .pipe(clean());
});
//清空中转的src/html文件
gulp.task('cleanSHtml', function () {
    return gulp.src(['rev', 'src/_html'], {read: false})
        .pipe(clean());
});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function () {
    return gulp.src(cssSrc)
        .pipe(plumber()) //plumber给pipe打补丁
       // .pipe(rev())
        // 压缩css
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css'))
        .pipe(gulp.dest('../../css'))
        //.pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'))
        .pipe(browserSync.reload({stream: true}));
});


//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function () {
    return gulp.src(jsSrc)
        .pipe(plumber()) //plumber给pipe打补丁
       // .pipe(rev()) // 添加版本后缀
        //压缩
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(gulp.dest('../../js'))
        //生成rev-manifest.json
       // .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
        .pipe(browserSync.reload({stream: true}));
});


//Html替换css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 'src/_html/**'])
        .pipe(plumber()) //plumber给pipe打补丁
        .pipe(revCollector({
            replaceReved: true
        }))
        .pipe(gulp.dest('dist'))
        .pipe(gulp.dest('../../'))
        .pipe(browserSync.reload({stream: true}));
});


// 将非js、非css移动到目标目录
gulp.task('mvNotDealAsset', function () {
    return gulp.src(['src/**/*', '!src/css/*.css', '!src/js/*.js', '!src/_html/*.html', '!src/_html', '!src/_html/**', '!src/_html/**/*.html', '!src/pages/**', '!src/pages'])
        .pipe(gulp.dest('dist'))
        .pipe(gulp.dest('../../'));
});

gulp.task('browser-sync', function () {
    browserSync.init({
        //server:'./dist'
        server: {
            baseDir: './dist',
            middleware: proxy('/api', {
                target: 'http://123.56.160.244:9005/api',    // 这里是你要代理的接口
                changeOrigin: true,
                logLevel: 'debug',
                pathRewrite: {
                    '^/api': ''
                }
            })
        },
        port: 3000
    }, function () {

    })
})
gulp.task('watch', ['browser-sync'], function () {
    watch(jsSrc, function (e) {
        console.log("js  is changed 。");
        gulp.start("default")
    })
    watch(cssSrc, function (e) {
        console.log("css  is changed 。");
        gulp.start("default")
    })
    watch(htmlSrc, function (e) {
        console.log("html  is changed 。");
        gulp.start("default")
    })
})
// 生产构建gulp
gulp.task('dev', ['fileinclude'], function (done) {
    condition = false;
    runSequence(
        ['jslint'],
        ['cleanDist'], //第一步：清理目标目录
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        ['mvNotDealAsset'],
        ['cleanSHtml'],
        ['watch'],
        done);
});
gulp.task('default', ['dev']);

/*gulp.task('test',function () {
    return gulp.src(['dist/!**!/!*'])
        .pipe(preprocess({
            context:{
                apiUrl :'http://123.54.160.244:9005',
                DEBUG :true
            }
        }))
        .pipe(gulp.dest('test'));
});*/

文件夹结构：

image.png

启动的命令：

gulp