【问题标题】:yeoman, grunt - how add a banner to my generated filesyeoman, grunt - 如何在我生成的文件中添加横幅
【发布时间】:2013-11-02 11:07:13
【问题描述】:

我使用 yeoman 移动生成器创建了一个移动应用程序。
我对 grunt 和 yeoman 很陌生,但它真的很棒!
有谁知道我必须做些什么来为我生成的文件添加横幅?

   meta: {
        version: '0.1.0',
        banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
            '* http://PROJECT_WEBSITE/\n' +
            '* Copyright (c) <%= grunt.template.today("yyyy") %> ' +
            'MyName; Licensed MIT */'
    },

我必须在哪里使用它。我尝试过类似的方法,但不影响。

    usemin: {
        options: {
            dirs: ['<%= yeoman.dist %>']
        },
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<banner:meta.banner>', '<%= yeoman.dist %>/styles/{,*/}*.css']
    },

...

    cssmin: {
        dist: {
            files: {
                '<%= yeoman.dist %>/styles/main.css': [
                    '<banner:meta.banner>', 
                    '.tmp/styles/{,*/}*.css',
                    '<%= yeoman.app %>/styles/{,*/}*.css'
                ]
            }
        }
    },

【问题讨论】:

    标签: gruntjs yeoman yeoman-generator


    【解决方案1】:

    横幅进入选项对象:

    cssmin: {
        dist: {
            options: {
                banner: '<%= meta.banner %>'
            },
            files: {
                '<%= yeoman.dist %>/styles/main.css': [
                    '.tmp/styles/{,*/}*.css',
                    '<%= yeoman.app %>/styles/{,*/}*.css'
                ]
            }
        }
    }
    

    提示:我还会使用 package.json 中的元数据,这样您就可以将其复制到 Gruntfile 中,您还可以将该横幅配置重复用于其他项目,而无需更改它。

    grunt.initConfig({
        // pkg: grunt.file.read('package.json'),
        pkg: grunt.file.readJSON('package.json'),
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
                '* http://<%= pkg.homepage %>/\n' +
                '* Copyright (c) <%= grunt.template.today("yyyy") %> ' +
                '<%= pkg.author.name %>; Licensed MIT */',
        cssmin: {
            dist: {
                options: {
                    banner: '<%= banner %>'
                },
                files: {
                    '<%= yeoman.dist %>/styles/main.css': [
                        '.tmp/styles/{,*/}*.css',
                        '<%= yeoman.app %>/styles/{,*/}*.css'
                    ]
                }
            }
        }
        // rest of your config...
    });
    

    package.json:

    {
        "name":                         "project name",
        "version":                      "0.1.0",
        "homepage":                     "https://stackoverflow.com",
        "author": {
            "name":                     "your name",
            "email":                    "your email",
            "url":                      "your website"
        }
        // devDependencies, etc
    }
    

    【讨论】:

    • 嘿伙计,非常感谢!非常适合这一行的 chage:"pkg: grunt.file.readJSON('package.json'),"
    • 一个问题,当我的 main.js(现在它只在 css)文件中也有横幅时,我必须把它放在哪里?
    • grunt-contrib-uglify 将横幅作为其选项之一,因此您可以执行uglify: { dist: { options: { banner: '&lt;%= banner %&gt;' } // rest of config } } 之类的操作。 github.com/gruntjs/grunt-contrib-uglify#banner
    • 值得注意的是 CSSMin 不再支持 banner 选项
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-16
    • 2016-11-10
    • 2020-10-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多