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帮我弄清楚我错过了当地的咕噜声设置：

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，它就会调用你在gruntfile.js最后一行看到的default任务，然后运行concat，uglify，compass，svgstore和watch。 / p> 罗盘是编译scss并缩小它的那个。

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

开始使用Grunt缩小CSS / SCSS？

1 个答案: