开始使用 Grunt 缩小 CSS/SCSS？

Question

在继承一个项目后，我发现开发人员正在使用 SCSS 和 Grunt 来缩小他的代码。我对两者都是新手，但注意到我必须在本地安装 grunt-cli。我已经这样做了，需要对样式表进行一些编辑，但仍在研究如何在进行更改后使 scss 最小化。

grunt/scss 区域的结构是：

_ (root folder)
_/css
_/grunt
_/img
_/inc
_/img
_/js
_/misc
_/sass

里面 _/grunt 是：

gruntfile.js
npm-debug.log
package.json

Steveax 帮我弄清楚我错过了本地 grunt 设置：

npm install

我在 _/scss 文件夹中找到了 SCSS 文件，并且可以轻松地编辑它们以更新样式；但是，在保存一个之后，我注意到它们不会自动更新 _/css 文件夹中的缩小 css，而是在文件和文档中寻找解决方案。我想有经验的人会知道我错过了什么命令。

这是一个 scss 文件的示例，_/sass/common.scss，我希望能够保存和替换等效的 css，_/css/common.css

编辑：根据 Robert Levy（下）的帮助，我似乎只需要在进行更改后运行 Grunt。

（x-参见上面的编辑）我只是从 _ 目录运行 uglify 吗？

 uglify /sass/common.scss -o /css/common.css -p 1

package.json 里面是：

{
  "name": "exampletheme.com",
 "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "^0.3.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-imagemin": "^0.5.0",
    "grunt-contrib-watch": "^0.6.0",
    "grunt-contrib-compass": "^0.7.2",
    "grunt-contrib-sass": "^0.7.3"
  }
}

_/grunt/gruntfile.js 里面是：

module.exports = function(grunt) {

// All configuration goes here 
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
        // Configuration for concatinating files goes here.
        dist: {
            src: [
                    '../js/libs/owl.carousel.js',
                    '../js/libs/jquery.actual.js',
                    '../js/libs/chosen.jquery.js',
                    '../js/libs/jquery.parallax.js',
                    '../js/src/common.js'  
            ],
            dest: '../js/pro/global.js',
        },
    },

    uglify: {
        build: {
            src: '../js/pro/global.js',
            dest: '../js/pro/global.min.js',
        },
    },


    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: '../img/src/',
                src: ['**/*.{png,jpg,gif}'],
                dest: '../img/pro/'
            }]
        }
    },

    compass: {
        dev: {
            options: {              
                sassDir: '../sass',
                cssDir: '../css',
                fontsDir: '../fonts',
                imagesDir: '../img/',
                images: '../img/',
                javascriptsDir: '../js/pro',
                //environment: 'development',
                outputStyle: 'compressed',
                relativeAssets: false,
                httpPath: '.',
            }
        },
    },

    watch: {
        scripts: {
            files: ['../js/**/**.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            },
        },
        images: {
            files: ['../img/src/**.{png,jpg,gif}'],
            tasks: ['imagemin'],
            options: {
                spawn: false,
            }
        },
        compass: {
            files: ['../**/*.{scss,sass}'],
            tasks: ['compass:dev'],
        }

    },

    svgstore: {
        defaults: {
            options: {
                prefix : 'icon-',
            },
            files: {
                '../img/svg-defs.svg': ['../img/svg/*.svg']
            }
        }
    },


});

// Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-svgstore');

// Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);

};

Answer 1

只需运行grunt，它将调用default 任务，您可以在 gruntfile.js 的最后一行看到该任务将依次运行 concat、uglify、compass、svgstore 和 watch。

compass 是编译 scss 并缩小它的工具。

watch 任务很有趣，因为它告诉 grunt 继续运行，密切关注您的文件，并在事情发生变化时重新编译。