【前端】ionic实现gulp压缩

前言

     小编接收到一个研究ionic手机端项目实现gulp压缩功能的任务，之前做过angular项目的gulp压缩，原理差不多，借鉴了前人的总结出来的文档，感谢文档的编写者们，让我可以顺利的完成这个任务。

下载gulp

    一、本地ionic项目打包，以这个打包出来的内容为基础进行下面的gulp压缩

1.构建打包——ionic build --test   //--test 指的是测试环境打包
2.全局安装gulp ----cnpm install gulp -g    //全局安装gulp，是为了执行gulp任务
3.本地安装gulp ----cnpm install gulp -save  //本地安装gulp是为了调用gulp插件的功能

二、 打包后的项目目录

 默认的是“www”文件夹，目前没有找到更改路径或文件夹名称的配置文件；

                       

安装gulp相关插件

   安装下面的gulp插件，方便执行对指定文件的压缩，还有更多的命令，下面只是常用的命令；

cnpm install gulp-rename  ---重命名文件
cnpm install gulp-uglify    ---压缩js文件
cnpm insall gulp-imagemin  ---压缩图片
cnpm install gulp-htmlmin   ---压缩HTML
cnpm install gulp-clean-css ---压缩css

新建gulpfile.js文件

  一、新建 

  在src文件的同级目录中新建gulpfile.js文件。

二、复制如下代码

 内容大致如下（其中的路径是自己项目下的路径，各有不同，根据情况进行修改）

var gulp         = require('gulp'),     //本地安装gulp所用到的地方
    uglify       = require('gulp-uglify');
    imagemin     = require('gulp-imagemin');
    htmlmin      = require('gulp-htmlmin');
    cssmin       = require('gulp-clean-css');
/**************************************定义gulp压缩的原文件夹和目标文件夹***************************************************/

var config = {
    src: 'www',//打包后的源目录
    dist: "dist"//gulp压缩的目标目录
}

/**************************************压缩js文件***********************************************************&***********/
    //定义一个testJS任务（自定义任务名称）
    gulp.task('testJS', function () {
      gulp.src(config.src+'/*.js') //该任务针对的文件
        .pipe(uglify())//该任务调用的模块
        .pipe(gulp.dest(config.dist+'/'));//输出路径
    });

    //定义一个testAssets任务压缩js
      gulp.task('testAssets', function () {
      gulp.src(config.src+'/assets/js/*.js') //多个文件以数组形式传入
        .pipe(uglify())
        .pipe(gulp.dest(config.dist+'/assets/js'));
    });

/************************************压缩image文件**********************************************************************/
    //定义一个testImagemin任务压缩image
    gulp.task('testImagemin', function () {
gulp.src(config.src+'/images/**/*.{png,jpg,gif,ico,jpeg}')
        .pipe(imagemin({
          optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
          progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
          interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
          multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest(config.dist+'/'));
    });

/***********************************压缩html文件*************************************************************************/
    //定义一个testHtmlmin任务压缩html
    gulp.task('testHtmlmin', function () {
      var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true//压缩HTML
      };
      gulp.src(config.src+'/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest(config.dist+'/'));
    });

/*************************************压缩css文件************************************************************************/
    //定义一个testCssmin任务压缩css
    gulp.task('testCssmin', function () {
      gulp.src(config.src+'/assets/css/**/*.css')
        .pipe(cssmin({
          advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
          compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
          keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
          keepSpecialComments: '*'
          //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest(config.dist+'/assets/css/'));
    });

/*********************************执行copy任务，将生成的压缩后的文件替换原目录中的文件******************************************/
    gulp.task('copy',function(){
      gulp.src(config.dist+'/**/*')   //使用通配符遍历文件夹下所有文件
        .pipe(gulp.dest(config.src+'/'));
});

执行gulp任务

gulp testJS
gulp testAssets
gulp testImagemin
gulp testCssmin
gulp testHtmlmin
gulp copy

小结

    执行过程中，会遇到一些问题，其中自己遇到的问题是由于自己的路径没有写对，最后的copy操作可以使用命令，也可以手动操作。

                                                                                 感谢您的访问！