小记心得

小记心得

grunt合并压缩js,css文件(第二弹)

废话不多说,直接上图:

目录结构,你懂得



package.json文件(用什么安装什么npm install):

{  
  "name": "anme",
  "file": "filename",
  "version": "0.1.0",  
  "description": "description",
  "license": "MIT",  
  "devDependencies": {  
    "grunt": "~0.4.1",  
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",  
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-cssmin": "~0.12.3"
  },  
  "dependencies": {  
    "express": "3.x"  
  }  
} 

css的压缩合并Gruntfile.js文件(灵活调用即可):

module.exports = function (grunt) {  
  // 项目配置  
  grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'),
    concat : {
      css : {
        src: ['src/*.css'],
        dest:'dest/all.css'
      }
    },
    cssmin: {
      buildall: {//按原文件结构压缩css文件夹内所有JS文件
        files: [{
          expand:true,
          cwd:'src',//src目录下
          src:'**/*.css',//所有css文件
          dest: 'dest'//输出到此目录下
        }]
      }
    }
  });  
  // 加载提供"uglify"任务的插件  
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默认任务  
  grunt.registerTask('default', ['cssmin']);
  //grunt.registerTask('default', ['uglify']);
  //grunt.registerTask('default', ['concat']);
}

js的压缩合并Gruntfile.js文件(灵活调用即可):

module.exports = function (grunt) {  
  // 项目配置  
  grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'),  
    uglify: {  
      options: {  
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */\n'  
      },
      buildall: {//按原文件结构压缩js文件夹内所有JS文件
        files: [{
          expand:true,
          cwd:'src',//src目录下
          src:'**/*.js',//所有js文件
          dest: 'dest'//输出到此目录下
        }]
      }
    },
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        //src: ['src/index.js', 'src/main.js', 'src/style.js'],
        src: ['src/*.js'],
        dest: 'dest/all.js'
      }
    },
    
  });  
  // 加载提供"uglify"任务的插件  
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默认任务
  //grunt.registerTask('default', ['cssmin']);//压缩样式
  //grunt.registerTask('default', ['uglify']);//压缩脚本
  grunt.registerTask('default', ['concat']);//合并脚本
}

建议:多动手,多尝试,你会懂的!


阅读更多
个人分类: 前端工具
想对作者说点什么? 我来说一句

grunt项目构建样例

2013年12月24日 4.95MB 下载

利用grunt合并压缩文件

2015年06月15日 1KB 下载

grunt压缩合并js/css

2016年06月15日 5MB 下载

没有更多推荐了,返回首页

不良信息举报

grunt合并压缩js,css文件(第二弹)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭