前端开发自动化:compass+grunt

最近在使用这个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(http://caibaojian.com)",
"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看看具体代码

grunt-tutorial

代码的文件目录有点混乱,后面整理一下出一份新的目录来吧。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:前端开发自动化:compass+grunt ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/grunt-compass-tutorial.html)

发表评论

请登录后发表评论:

“前端开发自动化:compass+grunt”有2个评论

  1. 冬的希望

    写的挺好。

    登录回复
  2. 链接通知 : 使用Grunt来编译compass并压缩js代码 — 好JSER