grunt如何自动编译scss文件（sass+compass+grunt）框架

grunt自动编译scss文件，压缩图片，js。

首先按照如下结构来创建目录。

创建目录
    statics
    |------monkey
    |------__src
    |------|------css sass源码文件
    |------|------image 图片源文件夹
    |------|------js 脚本源码文件
    |------css 项目引用文件地址，里面为压缩文件
    |------js 生成压缩文件夹
    |------image 生成压缩后文件夹，用于线上

安装软件ruby sass compass nodejs

1.安装ruby
地址：http://www.rubyinstaller.org/downloads/
2.安装sass(gem命令需要修改源地址，详情搜索gem 国内源)
命令：gem install sass
查询版本：sass -v
3.安装compass
命令：gem install compass
查询版本：compass -v
4.安装node.js
地址：http://www.nodejs.org/
5.安装grunt(npm命令需要修改源地址，详情搜索npm 国内源)
局部安装命令：npm install grunt-cli （局部安装则，需要进入statics的目录下面执行）
全局安装命令：npm install grunt-cli -g

创建package.json和Gruntfile.js

{
 "name": "grunt-sample",
 "version": "1.0.0",
 "devDependencies": {
 "grunt": "*",
 "grunt-contrib-uglify": "~0.2.7",
 "grunt-contrib-imagemin": "~0.4.0",
 "grunt-contrib-compass": "*",
 "grunt-contrib-watch": "*"
 }
}

module.exports = function(grunt) {
 // 项目配置
 grunt.initConfig({
 pkg: grunt.file.readJSON('package.json'),
 uglify: {//js压缩
 options: {
 ASCIIOnly: true
 },
 files: {
 expand: true,
 cwd: '__src/js', //批匹配相对lib目录的src来源
 src: '**/*.js', //实际的匹配模式
 dest: 'js' //目标路径前缀
 }
 },
 imagemin: {//图片压缩
 options: {
 optimizationLevel: 7
 },
 files: {
 expand: true,
 cwd: '__src/images',
 src: '**/*.{png,jpg,gif}',
 dest: 'images'
 }
 },
 compass: {
 dist: {
 options: {
 sassDir: '__src/css',
 cssDir: 'css',
 imagesDir: '__src/images/', //图片目录
 httpPath: '',
 httpImagesPath: '/images/',
 environment: 'production',
 // outputStyle: 'compressed', 'nested', 'expanded', 'compact'
 outputStyle: 'expanded'
 }
 }
 },
 watch: {
 uglify: {
 files: ['__src/js/**/*.js'],
 tasks: ['uglify']
 },
 imagemin: {
 files: ['__src/images/**/*.{png,jpg,gif}'],
 tasks: ['imagemin']
 },
 compass: {
 files: ['__src/css/**/*.scss'],
 tasks: ['compass']
 }
 }
 });

 // 加载提供"uglify"任务的插件
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-watch');

 // 默认任务
 grunt.registerTask('default', ['uglify', 'imagemin', 'compass']);
}

开始安装node模块

进入statics目录

npm install #有看到sceecssfully的字眼则安装成功

grunt watch #（提示如如下图）恭喜你sass+compass+grunt自动编译成功。
#提示如果修改了__src目录下的scss,js,img的文件grunt自动编译的话，可以用grunt来手动编译以下，后在grunt watch

我的个人博客
我的it心得