首页 > 代码库 > Sass编译css/Grunt压缩文件
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
Sass编译css/Grunt压缩文件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。