Jump to content

[solved] Grunt Task problem, cssmin runs manually but not with "watch"


horst
 Share

Recommended Posts

Hey all,

I have setup a local dev workflow that used postcss (grunt-postcss) with the cssnano processor for finally minifying the css. But this broke a part of my css. So I switched to cssmin (grunt-contrib-cssmin). This does not brake my css when minifying but it get not invoked when the tasks get started through grunt watch. When I manually call grunt, all gets processed. I post my files below. Does anybody have an idea what I'm doing wrong?

Gruntfile.js

Spoiler

module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),


        // STYLES

        sass: {
            dist: {
                options: {
                    cacheLocation: '.sass-cache',
                    unixNewlines: true,
                    lineNumbers: true,
                    style: 'expanded',
                    map: {
                        inline: false,                                  // save all sourcemaps as separate files...
                        annotation: 'public/css/'                       // ...to the specified directory
                    },
                },
                files: {
                    'localdev/_src-build/00_controller.css': 'localdev/styles/00_controller.scss'
                }
            }
        },
        postcss: {
            dist: {
                options: {
                    map: {
                        inline: false,                                  // save all sourcemaps as separate files...
                        annotation: 'public/css/'                       // ...to the specified directory
                    },
                    processors: [
                        require('autoprefixer')()                       // add vendor prefixes
                        //require('cssnano')()                          // minify the result
                    ]
                },
                src: 'localdev/_src-build/00_controller.css',
                dest: 'localdev/_src-build/00_controller.prefixed.css'
            }
        },
        cssmin: {
            //dist: {
                options: {
                    sourceMap: true
                },
//                src: 'localdev/_src-build/00_controller.prefixed.css',
//                dest: 'public/css/main.min.css'
                target: {
                    files: {
                        'public/css/main.min.css': 'localdev/_src-build/00_controller.prefixed.css'
                    }
                }
            //}
        },


        // SCRIPTS

        concat: {
            headerScript: {
                options: {
                    separator: '\n\n',
                    sourceMap: true,
                    sourceMapStyle: 'link'
                },
                src: [
                ],
                dest: 'localdev/_src-build/header.concat.js'
            },
            footerScript: {
                options: {
                    separator: '\n\n',
                    sourceMap: true,
                    sourceMapStyle: 'link'
                },
                src: [
                    'localdev/scripts/lazysizes.full.5.1.0.js',
                    'localdev/scripts/lite-vimeo-embed.js',
                    'localdev/scripts/lite-yt-embed.js',
                    'localdev/scripts/psc2f3.js',
                    'localdev/scripts/main.js'
                ],
                dest: 'localdev/_src-build/footer.concat.js'
                //dest: 'public/js/footer.min.js'
            }
        },
        babel: {
            options: {
                presets: ['@babel/preset-env'],
                sourceMap: true
                //inputSourceMap: grunt.file.readJSON('localdev/_src-build/header.concat.js.map')
            },
            dist: {
                files: {
                    'localdev/_src-build/header.babel.js': 'localdev/_src-build/header.concat.js',
                    'localdev/_src-build/footer.babel.js': 'localdev/_src-build/footer.concat.js',
                }
            }
        },
        uglify: {
            jqueryScriptMin: {
                options: {
                },
                src:  'localdev/scripts/libs/jquery-3.5.0.js',
                dest: 'public/js/jquery.min.js'
            },
            headerScriptMin: {
                options: {
                },
                src:  'localdev/_src-build/header.babel.js',
                dest: 'public/js/header.min.js'
            },
            footerScriptMin: {
                options: {
                },
                src:  'localdev/_src-build/footer.babel.js',
                dest: 'public/js/footer.min.js'
            }
        },

        clean: {
            //all_maps: ['_localdev/source/scripts/*.js.map', '_localdev/source/styles/*.css.map'],
            all_js: ['localdev/_src-build/**/*.js', 'localdev/_src-build/**/*.js.map'],
            all_css: ['localdev/_src-build/**/*.css', 'localdev/_src-build/**/*.css.map']
        },

        watch: {
            options: {
                //event: ['added', 'changed', 'deleted'],  // 'all'
                livereload: true,
                spawn: false
            },
            styles: {
                files: ['localdev/styles/**/*.scss'],
                tasks: ['sass', 'postcss'], // , 'cssmin'],
                options: {
                    event: ['added', 'changed', 'deleted']
                }
            },
            scripts: {
                files: ['localdev/scripts/**/*.js'],
                tasks: ['concat', 'babel', 'uglify'],
                options: {
                    event: ['added', 'changed', 'deleted']
                }
            }
        }
    });

    // Load the plugin that provides the task.
    grunt.loadNpmTasks('grunt-contrib-sass');
//    grunt.loadNpmTasks('grunt-atomizer');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default task(s).
    grunt.registerTask('default', [
        'sass',
//        'atomizer',
        'postcss',
        'cssmin',
        'concat',
        'babel',
        'uglify',
        'clean'
    ]);

};

 

package.json

Spoiler

{
  "name": "PROJEKTNAME",
  "version": "1.0.0",
  "repository": "reponame",
  "license": "WTFPL",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "autoprefixer": "^9.8.5",
    "grunt": "^1.2.1",
    "grunt-atomizer": "^3.1.3",
    "grunt-babel": "^8.0.0",
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^4.0.1",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-postcss": "^0.9.0"
  },
  "dependencies": {
    "grunt-sass": "^3.1.0"
  },
  "browserslist": [
    "last 3 versions",
    "> 2%",
    "not dead"
  ]
}

 

 

Link to comment
Share on other sites

Working until late night isn't always productive. ?

        watch: {
            options: {
                //event: ['added', 'changed', 'deleted'],  // 'all'
                livereload: true,
                spawn: false
            },
            styles: {
                files: ['localdev/styles/**/*.scss'],
                tasks: ['sass', 'postcss'], // , 'cssmin'],       
                                            // ^^ while temporary switching between cssnano an cssmin, I finally forgot to register cssmin in "watch"
                options: {
                    event: ['added', 'changed', 'deleted']
                }
            },

So everything makes sense again. ?

  • Like 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...