Sass编译cssGrunt压缩文件.docxVIP

Sass安装（mac）$ sudo gem install sassscss编译成css文件$ sass ui.scss ui.cssCLI安装$ npm install -g grunt-cliGrunt安装$ npm install gruntGrunt入门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将这些所学的插件进行安装。Gruntfilegruntfile.js或者gruntfile.coffee文件应该放在项目的根目录中，和package.js文件在同一目录层级。Gruntfile是由下面几部分组成的：“wrapper”函数项目与任务配置加载grunt插件和任务自定义任务module.exports = function(grunt) { // Project configuration.grunt.initConfig({pkg: grunt.file.readJSON(package.json), //压缩jsuglify: { //文件头部输出信息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,某个文件夹下的jsdest: 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(.));varfileresult=dest + folder + filename + .min.js;grunt.log.writeln(现处理文件：+src+ 处理后文件：+fileresult);returnfileresult;//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压缩命令：$ gruntuglifycss压缩命令：gruntuglify