最近在使用这个grunt之后，感觉真的挺好用的，下面我将分享如何进行基础的前端开发流程。
1.使用sublime text2书写sass代码
2.用compass解析css源代码（不压缩）
3.使用grunt里面的插件cssmin进行压缩为*.min.css
4.使用grunt里面的插件uglify压缩Js代码为*.min.js
5.使用grunt里面的插件concat合并压缩过的文件
6.grunt的watch插件可以随时监控以上内容，并实时解析出来。
以上说到底其实就是两件事：解析代码和压缩代码。
关于怎么使用grunt，请查看之前的文章：GRUNT:任务运行管理器
从之前的文章中我们可以知道，我们需要配置两个文件，一个是插件安装文件package.json和运行文件Gruntfile.js
给出本文的package.json代码
{
"name": "my-cms",
"description": "An example of how to set up Grunt for web development.",
"version": "0.1.0",
"author": "jack cai(https://qdkfweb.cn)",
"devDependencies": {
"grunt": "0.x.x",
"grunt-contrib-jshint": "0.6.x",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-uglify": "~0.1.0",
"grunt-contrib-watch": "~0.1.4",
"grunt-contrib-cssmin": "~0.8.0",
"grunt-contrib-compass": "~0.7.2"
}
}
Gruntfile.js代码
module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //compass编译 compass: { development: { options: { sassDir: 'sass', cssDir: 'css' } } }, //css压缩代码 cssmin: { minify: { expand: true, cwd: 'css/', src: ['*.css', '!*.min.css'], dest: 'css/', ext: '.min.css' } }, //js代码调试 jshint: { options: { eqeqeq: true, trailing: true }, files: ['js/custom.js'] }, //js代码压缩 uglify: { options: { mangle: false }, build: { files: { 'js/custom.min.js': ['js/custom.js'] } } }, //js文件合并 concat: { options: { separator: ';' }, dist: { src: ['js/jquery.min.js', 'js/custom.min.js'], dest: 'js/script.min.js' } }, //grunt watch watch: { compass:{ files:'sass/*', tasks:['compass'] }, cssmin:{ files:'css/*', tasks:['cssmin'] }, jshint:{ files:'js/*', tasks:['jshint'] }, uglify:{ files:'js/*', tasks:['uglify'] }, concat:{ files:'js/*', tasks:['concat'] } //使用下面这个的话将会遍历每个人事件，即使没有改动，所以建议把事件分开来，有改动时才执行 // files: ['sass/*','css/*', 'js/*'], // tasks: ['compass','cssmin','jshint', 'uglify', 'concat'] } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask('default', ['compass','cssmin:minify','jshint','uglify','concat']); // grunt.registerTask('default', ['jshint', 'concat', 'uglify']); grunt.registerTask('check', ['jshint']); };
做了一个项目提交到github上了，如果你喜欢，可以clone看看具体代码
代码的文件目录有点混乱，后面整理一下出一份新的目录来吧。
