grunt 合并css,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']);

}