coffee、grunt、less协同

ゞ浴缸里的玫瑰 2022-08-09 06:27 10阅读 0赞

实际项目中，单独使用coffee、grunt和less的很少，我们可以把他们整合其他协同使用来提高我们的效率。

grunt的定位是构建工具，我们可以利用它来调用coffee和less来实现我们的目的。

参考项目[https://github.com/mrcoles/static-less-coffeescript-grunt-project][https_github.com_mrcoles_static-less-coffeescript-grunt-project]。

gruntfile可以这样来写：

module.exports = function(grunt) { 
    
        // load tasks
        [
            'grunt-contrib-jshint',
            'grunt-contrib-qunit',
            'grunt-contrib-watch',
            'grunt-contrib-clean',
            'grunt-contrib-copy',
            'grunt-contrib-concat',
            'grunt-contrib-uglify',
            'grunt-contrib-cssmin',
            'grunt-contrib-concat',
            'grunt-contrib-less',
            'grunt-contrib-coffee',
            'grunt-usemin',
            'grunt-filerev'
        ].forEach(function(task) {  grunt.loadNpmTasks(task); });
    
    
        // setup init config
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
    
            // clean up the `dist/` directory, i.e., delete files
            clean: {
                dist: {
                    src: [
                        'dist/*',
    
                        // funny dance to keep old versioned dist/css/*.pkg.*.css
                        '!dist/css/**',
                        'dist/css/*',
                        '!dist/css/*.pkg.*.css',
    
                        // funny dance to keep old versioned dist/css/*.pkg.*.js
                        '!dist/js/**',
                        'dist/js/*',
                        '!dist/js/*.pkg.*.js'
                    ]
                }
            },
    
            // copy over `src/` files to `dist/`
            copy: {
                dist: {
                    files: [{
                        expand: true,
                        dot: true,
                        cwd: 'src/',
                        dest: 'dist/',
                        src: [
                            '*',
                            'css/**',
                            'js/**',
                            'ico/**',
                            'img/**'
                        ],
                        filter: 'isFile'
                    }]
                }
            },
    
            // compile LESS files in `src/less/` into CSS files
            less: {
                css: {
                    options: {
                        paths: ["src/less"]
                    },
                    files: [
                        {
                            expand: true,
                            cwd: 'src/less',
                            src: ['*.less'],
                            dest: 'src/css/',
                            ext: '.css'
                        }
                    ]
                }
            },
    
            // compile coffeescript files in `/src/coffee/` into JS files
            coffee: {
                glob_to_multiple: {
                    expand: true,
                    // flatten: true,
                    cwd: 'src/coffee',
                    src: ['**/*.coffee'],
                    dest: 'src/js',
                    ext: '.js'
                }
            },
    
            // prep call for usemin (target all html files)
            useminPrepare: {
                html: [
                    'dist/*.html'
                ]
            },
    
            // final call for usemin (target all html files)
            usemin: {
                html: [
                    'dist/*.html'
                ],
                options: {
                    dirs: ['dist/']
                }
            },
    
            // revision a specific set of static files, this can be
            // extended to do more files and images too
            filerev: {
                files: {
                    src: [
                        'dist/css/*.pkg.css',
                        'dist/js/*.pkg.js'
                    ]
                }
            },
    
            // TODO - support qunit
            qunit: {
                files: ['test/**/*.html']
            },
    
            // validate JS files using jshint (great for catching simple bugs)
            jshint: {
                files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
                options: {
                    // options here to override JSHint defaults
                    globals: {
                        jQuery: true,
                        console: true,
                        module: true,
                        document: true
                    },
                    ignores: [
                        // enter paths to ignore here, e.g., 'src/js/jquery.js'
                    ]
                }
            },
    
            // watch command to auto-compile files that have changed
            watch: {
                coffee: {
                    files: ['src/**/*.coffee'],
                    tasks: ['coffee', 'jshint']
                },
                less: {
                    files: ['src/**/*.less'],
                    tasks: ['less']
                }
            }
        });
    
        // Composite tasks...
    
        // run tests
        grunt.registerTask('test', ['jshint', 'qunit']);
    
        // like watch, but build stuff at start too!
        grunt.registerTask('dev', ['less', 'coffee', 'watch']);
    
        // full build of project to `dist/`
        grunt.registerTask('default', ['less', 'coffee', 'jshint', 'clean', 'copy',
                                       'useminPrepare',
                                       'concat', 'uglify', 'cssmin',
                                       'filerev',
                                       'usemin']);
    };

在这段代码中，使用了清理、压缩、测试、监听、复制、合并、less和coffee，我们可以在前面用数组遍历的方式逐个加载任务。

less任务的配置是这样子的：

less: {
        css: {
            options: {
                paths: ["src/less"]
            },
            files: [
                {
                    expand: true,
                    cwd: 'src/less',
                    src: ['*.less'],
                    dest: 'src/css/',
                    ext: '.css'
                }
            ]
        }
    }

当然，path是可选的，我们可以在files.src里更改。expand为true时动态生成文件名。coffee中的配置基本类似。

在末尾，我们可以指定监听任务。例如演示的gruntfile里的watch任务，实际执行了两个任务，分别监听coffee文件和less文件，然后编译成js和css。而执行default则会全部执行清理、压缩、测试、监听、复制、合并、less和coffee，最后产出压缩后的css和js文件。

[https_github.com_mrcoles_static-less-coffeescript-grunt-project]: https://github.com/mrcoles/static-less-coffeescript-grunt-project