当我运行grunt时,我的css没有更新

时间:2015-09-29 17:08:33

标签: css node.js gruntjs

Grunt似乎没有跟踪CSS文件。

这就是我的Gruntfile.js的样子

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //ec2: 'aws.json',
        concat: {
            vendorCss: {
                src: [
                    'public/vendor/bootstrap/bootstrap.min.css',
                    'public/vendor/fontawesome/css/font-awesome.css',
                    'public/vendor/owlcarousel/owl.carousel.css',
                    'public/vendor/owlcarousel/owl.theme.css',
                    'public/vendor/magnific-popup/magnific-popup.css'

                ],
                dest: 'public/stylesheets/build/vendors.css'
            },
            themeCss: {
                src: [
                    'public/stylesheets/theme.css',
                    'public/stylesheets/theme-elements.css',
                    'public/stylesheets/theme-blog.css',
                    'public/stylesheets/theme-animate.css'

                ],
                dest: 'public/stylesheets/build/theme.css'
            },
            extensionCss: {
                src: [
                    'public/stylesheets/skins/default.css',
                    'public/stylesheets/custom.css'

                ],
                dest: 'public/stylesheets/build/theme-extension.css'
            },
            homeCss: {
                src:[
                    'public/vendor/rs-plugin/css/settings.css',
                    'public/vendor/circle-flip-slideshow/css/component.css'
                ],
                dest: 'public/stylesheets/build/home-page.css'

            },
            vendorsJs: {
                src: [
                    'public/vendor/jquery/dist/jquery.js',
                    'public/vendor/jquery.appear/jquery.appear.js',
                    'public/vendor/jquery.easing/jquery.easing.js',
                    'public/vendor/jquery-cookie/jquery-cookie.js',
                    'public/vendor/bootstrap/bootstrap.min.js',
                    'public/vendor/common/common.js',
                    'public/vendor/jquery.validation/jquery.validation.js',
                    'public/vendor/jquery.stellar/jquery.stellar.js',
                    'public/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.js',
                    'public/vendor/jquery.gmap/jquery.gmap.js',
                    'public/vendor/twitterjs/twitter.js',
                    'public/vendor/isotope/jquery.isotope.js',
                    'public/vendor/owlcarousel/owl.carousel.js',
                    'public/vendor/jflickrfeed/jflickrfeed.js',
                    'public/vendor/magnific-popup/jquery.magnific-popup.js',
                    'public/vendor/vide/jquery.vide.js',
                    'public/javascripts/app/theme.js'
                ],
                dest: 'public/javascripts/build/vendors.js'
            },
            homeJs: {
                src: [
                    'public/vendor/rs-plugin/js/jquery.themepunch.tools.min.js',
                    'public/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js',
                    'public/vendor/circle-flip-slideshow/js/jquery.flipshow.js',
                    'public/javascripts/app/views/view.home.js'

                ],
                dest: 'public/javascripts/build/home-page.js'
            },
            contactJs: {
                src: [
                    'https://www.google.com/recaptcha/api.js',
                    'public/javascripts/app/views/view.contact.js'
                ],
                dest: 'public/javascripts/build/contact-page.js'
            },
            themeJs: {
                src: [
                    'public/javascripts/app/custom.js',
                    'public/javascripts/app/preload.js',
                    'public/javascripts/app/theme.init.js',
                    'public/javascripts/app/google-analytics.js',
                ],
                dest: 'public/javascripts/build/theme.js'
            },
            productionCss: {
                src: [
                    'public/stylesheets/build/vendors.css',
                    'public/stylesheets/build/theme.css',
                    'public/stylesheets/build/home-page.css',
                    'public/stylesheets/build/theme-extension.css'
                ],
                dest: 'public/dist/stylesheets/production.css'

            },
            productionJs: {
                src: [
                    'public/javascripts/build/vendors.js',
                    'public/javascripts/build/home-page.js',
                    'public/javascripts/build/contact-page.js',
                    'public/javascripts/build/theme.js'
                ],
                dest: 'public/javascripts/build/production.js'

            },
            productionModernizr: {
                src: [
                    'public/vendor/modernizr/modernizr.js'
                ],
                dest: 'public/javascripts/build/modernizr.js'

            }
        },
        uglify: {
            productionJs: {
                src: 'public/javascripts/build/production.js',
                dest: 'public/dist/javascripts/production.min.js'
            },
            productionModernizr: {
                src: 'public/javascripts/build/modernizr.js',
                dest: 'public/dist/javascripts/modernizr.min.js'
            }
        },
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'public/dist/stylesheets',
                    src: ['*.css', '!*.min.css' ],
                    dest: 'public/dist/stylesheets',
                    ext: '.min.css'
                }]
            }
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'public/images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'public/dist/images'
                }]
            }
        },
        watch: {
            scripts: {
                files: [
                    'public/stylesheets/**/*.css',
                    'public/javascripts/**/*.js'
                ],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-css-url-replace');
    //grunt.loadNpmTasks('grunt-contrib-ec2');

    // Default task(s).
    grunt.registerTask('default', ['concat', 'cssmin'
        , 'uglify'
        //,'imagemin'
    ]);

};

我一直在为stylesheets / theme.css添加CSS更改。因为从gruntfile可以看出,这会将'stylesheets / theme.css'转换为'public / stylesheets / build / theme.css',然后将其转换为'public / dist / stylesheets / production.css'

这是我从开发人员手中接过的一个项目(我是一名设计师)。当我运行'grunt'时,知道为什么CSS更改没有显示?

1 个答案:

答案 0 :(得分:0)

看起来当你运行grunt时,所有实际运行的都是 'concat', 'cssmin', 'uglify'

将最后一个代码块更新为

grunt.registerTask('default', ['concat', 'cssmin', 'uglify' ,'watch']);