gulp

Posted 2020-10-05 寂寞之砂

//npm install gulp-rev --save-dev
var gulp = require(‘gulp‘),
    minifycss = require(‘gulp-clean-css‘), //使用gulp-minify-css压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。
    concat = require(‘gulp-concat‘), //使用gulp-concat合并javascript文件，减少网络请求。
    uglify = require(‘gulp-uglify‘), //使用gulp-uglify压缩javascript文件，减小文件大小
    rev = require(‘gulp-rev‘),       //添加版本号
    revCollector = require(‘gulp-rev-collector‘),        //静态资源路径替换
    replace = require(‘gulp-replace‘),                    //替换路径
    rename = require(‘gulp-rename‘), //修改文件名，例如将demo.css修改为demo.min.css，一般配合gulp-minify-css/gulp-uglify压缩插件一起使用
    clean = require(‘gulp-clean‘);//- 清空文件夹，避免资源冗余

//==============================清空文件夹,避免资源冗余js==================//
gulp.task(‘clean‘, function () {
    gulp.src([‘./Content/css/buildCSS‘, ‘./buildComponents‘], {read: false})
        .pipe(clean());
    gulp.src(‘./buildJS‘, {read: false})
        .pipe(clean());
    gulp.src(‘./rev‘, {read: false})
        .pipe(clean());
});

//调试版，未压缩文件，页面引用原地址
gulp.task(‘dev‘,function () {
    //========================CSS压缩=================================//
    //公共模块(基本+图标+模态框)
    gulp.src([‘./Content/css/Layout/base.css‘, ‘./Content/css/Layout/icon.css‘, ‘./Components/Modal/K12.css‘, ‘./Components/Modal/Modal.css‘])
        .pipe(concat(‘base.css‘))
        .pipe(gulp.dest(‘./Content/css/Module‘))

    //头尾的样式（Header + Footer）
    gulp.src([‘./Components/Header/Header.css‘, ‘./Components/Header/K12.css‘, ‘./Components/Footer/Footer.css‘, ‘./Components/Footer/K12.css‘])
        .pipe(concat(‘HeaderFooter.css‘))
        .pipe(gulp.dest(‘./Components/Header‘))

    //===============================js压缩===========================//
    //公共模块(配置+公用方法+模态框)
    gulp.src([‘./Config_param.js‘, ‘./Scripts/hex_tools.js‘, ‘./Scripts/vm_config.js‘, ‘./Scripts/common-3.0.js‘, ‘./Components/Modal/Modal.js‘])
        .pipe(concat(‘base.js‘))
        .pipe(gulp.dest(‘./Scripts‘))
})

//测试版，已压缩文件
gulp.task(‘debug‘, function () {
    //========================CSS压缩=================================//
    //公共模块(基本+图标+模态框)
    gulp.src([‘./Content/css/Layout/base.css‘, ‘./Content/css/Layout/icon.css‘, ‘./Components/Modal/K12.css‘, ‘./Components/Modal/Modal.css‘])
        .pipe(minifycss())
        .pipe(concat(‘base.css‘))
        .pipe(gulp.dest(‘./Content/css/Module‘))

    //头尾的样式（Header + Footer）
    gulp.src([‘./Components/Header/Header.css‘, ‘./Components/Header/K12.css‘, ‘./Components/Footer/Footer.css‘, ‘./Components/Footer/K12.css‘])
        .pipe(minifycss())
        .pipe(concat(‘HeaderFooter.css‘))
        .pipe(gulp.dest(‘./Components/Header‘))

    //单个页面css文件
    gulp.src("./Content/css/Module/*.css")
        .pipe(minifycss())
        .pipe(gulp.dest(‘./Content/css/buildCSS‘))

    // //组件库css文件,生成到源文件夹下
    // gulp.src(‘./Components/**/*.css‘, function (err, files) {
    //     files.map(function (entry) {
    //         var destUrl = entry.substring(0, entry.lastIndexOf(‘/‘));
    //         return gulp.src(entry)
    //             .pipe(minifycss())
    //             .pipe(gulp.dest(destUrl));
    //     })
    // })
    //组件库css文件
    gulp.src("./Components/**/*.css")
        .pipe(minifycss())
        .pipe(gulp.dest(‘./buildComponents‘))

    //===============================js压缩===========================//
    //公共模块(配置+公用方法+模态框)
    gulp.src([‘./Config_param.js‘, ‘./Scripts/hex_tools.js‘, ‘./Scripts/vm_config.js‘, ‘./Scripts/common-3.0.js‘, ‘./Components/Modal/Modal.js‘])
        .pipe(uglify())
        .pipe(concat(‘base.js‘))
        .pipe(gulp.dest(‘./Scripts‘))

    //单个页js文件
    gulp.src("./Scripts/**/*.js")
        .pipe(uglify())
        .pipe(gulp.dest(‘./buildJS‘))

    //组件库js文件
    gulp.src("./Components/**/*.js")
        .pipe(uglify())
        .pipe(gulp.dest(‘./buildComponents‘))

    //=======================压缩图片================================//
    //组件库img文件
    gulp.src(‘./Components/**/img/*.{png,jpg,gif,ico}‘)
        .pipe(gulp.dest(‘./buildComponents‘))

    //======================替换相对路径=========================//
    gulp.src([‘./*.html‘])
        .pipe(replace(‘/Module‘, ‘/buildCSS‘)) //替换css文件
        .pipe(replace(‘/Scripts‘, ‘/buildJS‘)) //替换js文件
        .pipe(replace(‘/Components‘, ‘/buildComponents‘)) //替换Components文件
        .pipe(gulp.dest(‘./‘));
    gulp.src([‘./Pages/**/*.html‘])
        .pipe(replace(‘/Module‘, ‘/buildCSS‘))
        .pipe(replace(‘/Scripts‘, ‘/buildJS‘)) //替换js文件
        .pipe(replace(‘/Components‘, ‘/buildComponents‘)) //替换Components文件
        .pipe(gulp.dest(‘./Pages‘));
});

//线上版，已压缩文件，已加上版本号
gulp.task(‘default‘, function () {
    //========================CSS压缩=================================//
    //公共模块(基本+图标+模态框)
    gulp.src([‘./Content/css/Layout/base.css‘, ‘./Content/css/Layout/icon.css‘, ‘./Components/Modal/K12.css‘, ‘./Components/Modal/Modal.css‘])
        .pipe(minifycss())
        .pipe(concat(‘base.css‘))
        .pipe(gulp.dest(‘./Content/css/Module‘))

    //头尾的样式（Header + Footer）
    gulp.src([‘./Components/Header/Header.css‘, ‘./Components/Header/K12.css‘, ‘./Components/Footer/Footer.css‘, ‘./Components/Footer/K12.css‘])
        .pipe(minifycss())
        .pipe(concat(‘HeaderFooter.css‘))
        .pipe(gulp.dest(‘./Components/Header‘))

    //单个页面css文件
    gulp.src("./Content/css/Module/*.css")
        .pipe(minifycss())
        .pipe(rev()) //添加版本号
        .pipe(gulp.dest(‘./Content/css/buildCSS‘))
        .pipe(rev.manifest({
            merge: true  //合并为true，合并生成的json文件
        })) //- 生成一个rev-manifest.json;
        .pipe(gulp.dest(‘rev/css/Content‘));

    //组件库css文件
    gulp.src("./Components/**/*.css")
        .pipe(minifycss())
        .pipe(rev()) //添加版本号
        .pipe(gulp.dest(‘./buildComponents‘))
        .pipe(rev.manifest({
            merge: true  //合并为true，合并生成的json文件
        })) //- 生成一个rev-manifest.json;
        .pipe(gulp.dest(‘rev/css/Components‘));

    //===============================js压缩===========================//
    //公共模块(配置+公用方法+模态框)
    gulp.src([‘./Config_param.js‘, ‘./Scripts/hex_tools.js‘, ‘./Scripts/vm_config.js‘, ‘./Scripts/common-3.0.js‘, ‘./Components/Modal/Modal.js‘])
        .pipe(uglify())
        .pipe(concat(‘base.js‘))
        .pipe(gulp.dest(‘./Scripts‘));

    //单个页js文件
    gulp.src("./Scripts/**/*.js")
        .pipe(uglify())
        .pipe(rev()) //添加版本号
        .pipe(gulp.dest(‘./buildJS‘))
        .pipe(rev.manifest({
            merge: true  //合并为true，合并生成的json文件
        })) //- 生成一个rev-manifest.json;
        .pipe(gulp.dest(‘rev/js/Scripts‘));

    //组件库js文件
    gulp.src("./Components/**/*.js")
        .pipe(uglify())
        .pipe(rev()) //添加版本号
        .pipe(gulp.dest(‘./buildComponents‘))
        .pipe(rev.manifest({
            merge: true  //合并为true，合并生成的json文件
        })) //- 生成一个rev-manifest.json;
        .pipe(gulp.dest(‘rev/js/Components‘));

    //=======================压缩图片================================//
    //组件库img文件
    gulp.src(‘./Components/**/img/*.{png,jpg,gif,ico}‘)
        .pipe(gulp.dest(‘./buildComponents‘))


    //======================替换相对路径=========================//
    gulp.src([‘./*.html‘])
        .pipe(replace(‘/Module‘, ‘/buildCSS‘)) //替换css文件
        .pipe(replace(‘/Scripts‘, ‘/buildJS‘)) //替换js文件
        .pipe(replace(‘/Components‘, ‘/buildComponents‘)) //替换Components文件
        .pipe(gulp.dest(‘./‘));
    gulp.src([‘./Pages/**/*.html‘])
        .pipe(replace(‘/Module‘, ‘/buildCSS‘))
        .pipe(replace(‘/Scripts‘, ‘/buildJS‘)) //替换js文件
        .pipe(replace(‘/Components‘, ‘/buildComponents‘)) //替换Components文件
        .pipe(gulp.dest(‘./Pages‘));
});

//==========================//替换资源文件引用===============================//
gulp.task("revUrl",function () {
    //替换html页面引用的样式和脚本
    gulp.src([‘./rev/{css,js}/**/*.json‘, ‘./*.html‘])        //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())                                               //- 执行文件内css名的替换
        .pipe(gulp.dest(‘./‘));                                        //- 替换后的文件输出的目录

    gulp.src([‘./rev/{css,js}/**/*.json‘, ‘./Pages/**/*.html‘])        //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())                                               //- 执行文件内css名的替换
        .pipe(gulp.dest(‘./Pages‘));                                        //- 替换后的文件输出的目录
})