Grunt学习--copy文件、concat文件、压缩图片(包含上一篇的压缩文件)

module.exports = function(grunt) {
  grunt.initConfig({
    //css文件压缩
    cssmin: {
      foo:{
        options: {
          report:'gzip', //生成文件类型 默认是min
          sourceMap:true, //生成map文件
          mergeIntoShorthands: false, //快速压缩
          roundingPrecision: -1   //精确度
        },
        //写法一
        // files:{
        //   "./build/index.min.css":"./src/css/nav.css",
        // }
        // 写法二
        // src:'./src/css/nav.css',
        // dest:'./build/index.min.css'
        //写法三
        files:[{
          src:'./src/css/*.css',
          dest:'./build/css/index.min.css'
        }]
      }
    },

    //html文件压缩
    htmlmin:{
      dist:{
        options:{
          removeComments: true, //删除注释
          collapseWhitespace: true //折叠空白字符
        },
        files:[{
          src:"./*.html",
          dest:"./index.min.html"
        }]
      }
    },

    //babel监听js文件,将es6转换为es5
    babel:{
      options:{
        sourceMap:true,
        presets:["@babel/preset-env"]
      },
      dist:{
        files:{
          "./src/babel/index.js":"src/js/index.js"
        }
      }
    },

    //js文件压缩
    uglify:{
      options:{
        sourceMap:true,
        report:'min',
        beautify:false
      },
      dist:{
        files:{
          './build/js/index.js':'./src/babel/index.js'
        }
      }
    },

     //concat合并文件
    concat:{
      options:{
        separactor:";", //分隔符号
        sourceMap:true,
        nonull:true
      },
      dist:{
        files:[{
          src:'./src/css/*.css',
          dest:'./src/concat/index.css'
        }]
      }
    },

    //copy文件
    copy:{
      options:{
        timestamps:true, //设置修改的时间戳
      },
      dist:{
        files:[{
          expand: true, 
          src: ['src/*'], 
          dest: 'bulid/'
        }]
      }
    },

    //压缩图片
    imagemin:{
      options:{
        iterlaced:true,//交错扫描优化
        optimizationLevel: 3, //选择介于0和7之间的优化级别
        svgoPlugins: [{removeViewBox: false}]
      },
      dist:{
        files:{
          "./build/image/p0.min.jpg":"src/image/p0.jpg"
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-imagemin');

  grunt.registerTask('default', ['htmlmin','babel','uglify','concat','imagemin']);

};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值