zoukankan      html  css  js  c++  java
  • gulp

    //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'));                                        //- 替换后的文件输出的目录
    })
  • 相关阅读:
    滚轮事件
    键盘事件
    运动(学习)
    事件(没有尽头的待完善)
    js 盒子模型(没写完)
    Number 数字相关的方法, 强制 、隐式类型转换 、进制之间转换
    操作DOM 和 节点
    DOM
    Object 的一些静态方法 、 for-in 循环、Object.keys() 、Object.values()、Object.entries()
    删除字段
  • 原文地址:https://www.cnblogs.com/sanqianjin/p/7465365.html
Copyright © 2011-2022 走看看