Grunt 合并js/css并压缩

当然首先是安装nodejs,grunt，nodejs请自行安装，搞前端的，电脑上没个nodejs？

按装：grunt

npm install -g grunt-cli

package.json 配置

{
  "name": "demo",
  "version":         "0.1.0",
  "description":     "demo",
  "license":         "MIT",
  "devDependencies": {
    "grunt":                   "~0.4.1",
    "grunt-contrib-jshint":    "~0.6.3",
    "grunt-contrib-concat":    "~0.3.0",
    "grunt-contrib-uglify":    "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy":      "~0.4.1",
    "grunt-contrib-clean":     "~0.5.0",
    "grunt-strip":             "~0.2.1",
    "grunt-contrib-watch": "~0.6.0",
    "grunt-contrib-cssmin": "~0.5.0"
  },
  "dependencies":    {
    "express": "3.x"
  }
}

Gruntfile.js文件配置，本站js原来没有合并之前，都存在各jQuery插件目录中，复制线上路径后，简单修改一下，改到本地目录

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      "my_target": {
        "files": {
          'dest/libs.min.js': ['src/js/vendor/bootstrap.min.js',
        'src/js/vendor/superfish/js/superfish.min.js',
        'src/js/vendor/jRespond/jRespond.min.js',
        'src/js/vendor/smoothscroll/SmoothScroll.js',
        'src/js/vendor/appear/jquery.appear.js',
        'src/js/vendor/stellar/jquery.stellar.min.js',
        'src/js/vendor/flexslider/jquery.flexslider-min.js',
        'src/js/vendor/magnific/jquery.magnific-popup.min.js',
        'src/js/vendor/owl/owl.carousel.min.js',
        'src/js/vendor/jflickrfeed/jflickrfeed.min.js',
        'src/js/vendor/tweet-js/jquery.tweet.min.js',
        'src/js/vendor/countTo/jquery.countTo.js',
        'src/js/vendor/bootstrap-select/js/bootstrap-select.min.js',
        'src/js/vendor/range-slider/js/plugin.js',
        'src/js/vendor/touchspin/jquery.bootstrap-touchspin.js',
        'src/js/vendor/alertify/alertify.min.js',
        'src/js/vendor/cookie/jquery.cookie.js',
        'src/js/vendor/holder/holder.min.js',
        'src/js/vendor/alertify/alertify.min.js',
        'src/js/vendor/highlightjs/highlight.min.js',
        'src/js/vendor/rs-plugin/js/jquery.themepunch.tools.min.js',
        'src/js/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js',
        'src/js/vendor/animsition/js/jquery.animsition.min.js'],
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

配置完成后在当前项目目录运行

grunt

Css合并压缩

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {//css文件合并
      css: {
        src: ['src/css/bootstrap.css',
              'src/css/docs.min.css',
              'src/css/font-awesome.min.css',
              'src/css/animate.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
        dest: 'dest/base.css'  //生成到grunt项目路径下的dest文件夹下为base.css
      }
    },
    cssmin: { //css文件压缩
       css: {
          src: 'dest/base.css',//将之前的base.css
          dest: 'dest/base.min.css'  //压缩
        }
     }
});
   grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.registerTask('default', ['concat', 'cssmin']);
}