Sass编译css/Grunt压缩文件

Sass安装（mac）

$ sudo gem install sass

scss编译成css文件

$ sass ui.scss ui.css

CLI安装

$ npm install -g grunt-cli

Grunt安装

$ npm install grunt

Grunt入门

package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    grunt": "~0.4.5",
	"grunt-contrib-jshint": "~0.10.0",
	"grunt-contrib-nodeunit": "~0.4.1",
	"grunt-contrib-uglify": "~0.5.0",
	"grunt-contrib-concat": "~0.5.1",
	"grunt-contrib-cssmin": "~0.12.3",
	"grunt-htmlhint": "~0.9.2"
  }
}

在package.json所在目录中运行npm install将这些所学的插件进行安装。

Gruntfile

gruntfile.js或者gruntfile.coffee文件应该放在项目的根目录中，和package.js文件在同一目录层级。

Gruntfile是由下面几部分组成的：

“wrapper”函数
项目与任务配置
加载grunt插件和任务
自定义任务

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //压缩js
	uglify: {
    //文件头部输出信息
    options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
        files: [
            {
                expand: true,
                //相对路径
                cwd: 'bower_components/',
                src: ['*.js','*.min.js'],
                //src: ['**/*.js', '!**/*.min.js'],  //不包含某个js,某个文件夹下的js
                dest: 'dest/js/',
					rename: function (dest, src) {
   					var folder = src.substring(0, src.lastIndexOf('/'));
    				var filename = src.substring(src.lastIndexOf('/'), src.length);
    				//  var filename=src;
    				filename = filename.substring(0, filename.lastIndexOf('.'));
    				var fileresult=dest + folder + filename + '.min.js';
    				grunt.log.writeln("现处理文件："+src+"  处理后文件："+fileresult);

    				return fileresult;
    				//return  filename + '.min.js';
				}
            }
        ]
    }
	},
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名

cwd：需要处理的文件所在的目录

src：表示需需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符

dest：表示处理后的文件名后缀

rname：正在处理的文件名写在了terminal中

grunt常用函数说明：

grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。

grunt.loadNpmTasks：加载完成任务所需的模块。

grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。

命令行执行grunt任务

进入项目的根目录中，执行

$ Grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行，例执行js压缩命令：

$ grunt uglify

css压缩命令：

grunt uglify

秒客网