Question

我是网页设计的新手，你可以想象，尝试成为像SaSS，NPM和Grunt这样的东西的全栈开发者是一个巨大的学习曲线。我有一个样板文字WordPress主题，它包含了一个grunt工作流程，包括sass，minifier，BrowserSync和所有有趣的东西。但它在工作流程中没有autoprefixer，我想添加它，因为我想开始测试FlexBox设计，这需要大量的前缀才能正常工作。我在网上搜索了如何简单地将Auto Prefixer添加到gruntfile，并且所有答案都非常模糊，并附带说明“只需将此代码添加到grunt.js文件中”...好吧究竟在文件中的哪个位置？这应该是一个“后期处理”，而grunt.js似乎是按照完成任务的顺序编写的。我也不熟悉任何语法，所以只是说“包含它”没有帮助，我总是担心我没有把它放在一个支架之后或正确的分号之前。我希望有人明确告诉我需要将代码放在grunt.js文件中。

作为奖励，我想将此添加到我的package.json文件中，以便将来当我启动一个新项目并运行我的初始“install npm”命令时，它将下载{{1准备出门了。

SO tldr; 如何下载自动前缀？（它是一个文件夹中的一组文件吗？我的项目中应该放置文件的文件夹，以防万一我最初通过命令行将它安装在错误的位置）我需要在auto prefixer文件中添加autoprefixer代码吗？最后，当我第一次输入“install npm”时，我需要将哪些内容放在我的Grunt.js文件中，以确保我的未来项目中包含autoprefixer？

我将包含我当前的package.json文件和Grunt.js文件，因此您可以简单地为我复制/粘贴必要的代码。这有助于我将来了解如何在我的工作流程中添加新流程。

这是我的package.json文件：

Grunt.js

这是我的module.exports = function ( grunt ) { 'use strict'; // Load all grunt tasks matching the 'grunt-*' pattern require( 'load-grunt-tasks' )( grunt ); // Time how long tasks take. require('time-grunt')(grunt); // Get this party started grunt.initConfig({ pkg: grunt.file.readJSON( 'package.json' ), // Global variables config: { src: 'assets/src', dist: 'assets/dist', devUrl: 'tayloroyer.local:8888' }, // Libsass sass: { minified: { options: { sourceMap: true, outputStyle: 'compressed', // expanded, nested, compressed }, files: { '<%= config.dist %>/css/main.min.css': '<%= config.src %>/sass/main.scss', '<%= config.dist %>/css/no-mq.min.css': '<%= config.src %>/sass/no-mq.scss' } }, expanded: { options: { outputStyle: 'expanded' }, files: { '<%= config.dist %>/css/main.css': '<%= config.src %>/sass/main.scss', '<%= config.dist %>/css/no-mq.css': '<%= config.src %>/sass/no-mq.scss' } } }, // Clean CSS Output csscomb: { dist: { options: { config: '<%= config.src %>/sass/csscomb.json' }, files: { '<%= config.dist %>/css/main.css': ['<%= config.dist %>/css/main.css'], '<%= config.dist %>/css/no-mq.css': ['<%= config.dist %>/css/no-mq.css'] } } }, // Concatenate JS Files concat: { main: { files: { '<%= config.dist %>/js/main.js': '<%= config.src %>/js/main.js' } }, plugins: { files: { '<%= config.dist %>/js/plugins.js': [ '<%= config.src %>/js/plugins/boilerplate.js', '<%= config.src %>/js/plugins/jquery.magnific-popup.js', '<%= config.src %>/js/plugins/jquery.cycle2.js', '<%= config.src %>/js/plugins/jquery.cycle2.swipe.js' ] } } }, // Minify JS uglify: { options: { sourceMap: true, preserveComments: 'some' }, main: { files: { '<%= config.dist %>/js/main.min.js': [ '<%= config.src %>/js/main.js' ] } }, plugins: { files: { '<%= config.dist %>/js/plugins.min.js': [ '<%= config.dist %>/js/plugins.js' ] } } }, // Optimize Media imagemin: { images: { options: { optimizationLevel: 3, // default progressive: true // default }, files: [{ expand: true, cwd: '<%= config.src %>/img/', src: ['**/*.{png,jpg,gif}'], dest: '<%= config.dist %>/img/' }] } }, // Copy Files/Folders copy: { js: { expand: true, cwd: '<%= config.src %>/js/plugins/', src: 'modernizr-2.8.3.min.js', dest: '<%= config.dist %>/js/plugins/', } }, // Growl Notifications notify: { livereload: { options: { title: 'Browser Updated', message: 'Livereload completed.' } } }, browserSync: { bsFiles: { src: [ '<%= config.dist %>/css/*.css', '<%= config.dist %>/js/**/*.js', '<%= config.dist %>/img/', '**/*.php' ], }, options: { // notify: false, // open: false, watchTask: true, proxy: '<%= config.devUrl %>' } }, // Run Tasks When Files Are Modified watch: { css: { files: '<%= config.src %>/sass/**/*.{scss,sass}', tasks: [ 'sass:minified' ], // tasks: [ 'sass', 'csscomb' ] // slower, but will process all CSS files }, jsMain: { files: [ '<%= config.src %>/js/main.js' ], tasks: [ 'uglify:main' ] }, jsPlugins: { files: [ '<%= config.src %>/js/plugins.js', '<%= config.src %>/js/plugins/**/*.js' ], tasks: [ 'concat', 'uglify:plugins', 'newer:copy:js' ] }, images: { files: [ '<%= config.src %>/img/**/*.{png,jpg,gif}' ], tasks: [ 'newer:imagemin' ] }, // This can be used in place of BrowserSync // livereload: { // options: { // livereload: true, // spawn: false // }, // files: [ // '<%= config.dist %>/css/*.css', // '<%= config.dist %>/js/**/*.js', // '<%= config.dist %>/img/', // // '**/*.php' // ], // tasks: [ 'notify:livereload' ] // } }, }); // Default grunt.registerTask( 'default', [ 'sass', 'csscomb', 'concat', 'uglify', 'newer:copy:js', 'newer:imagemin', 'browserSync', 'watch', // add after 'browserSync'. Not needed for Livereload ]); // Build // Run all tasks, including sass:expanded grunt.registerTask( 'build', [ 'sass', 'csscomb', 'concat', 'uglify', 'newer:copy:js', 'newer:imagemin', ]); // Images grunt.registerTask( 'media', ['newer:imagemin'] ); };文件：

package.json

Answer 1

如果您使用npm install grunt-autoprefixer只会将this package安装到您的项目中。如果您添加了将此包添加到--save的标记packages.json。这样，如果您忽略版本控制中的node_modules目录，则可以键入npm install，它将自动获取。

为了澄清，添加标志意味着您输入如下命令：

npm install grunt-autoprefixer --save

现在开始使用它。通常，为了在grunt中使用任何包，您会发现文档告诉您将其包含在文件的顶部

grunt.loadNpmTasks('grunt-package-name'); // e.g grunt-autoprefixer

幸运的是，我们有一个笨拙的任务，可以自动检查package.json文件上的所有grunt任务并包含它们，而无需手动包含上述行。这是您文件中的这一行

// Load all grunt tasks matching the 'grunt-*' pattern
require( 'load-grunt-tasks' )( grunt );

现在要配置任务，我已将Gruntfile.js修改为此

module.exports = function ( grunt ) {
    'use strict';

    // Load all grunt tasks matching the 'grunt-*' pattern
    require( 'load-grunt-tasks' )( grunt );

    // Time how long tasks take.
    require('time-grunt')(grunt);

    // Get this party started
    grunt.initConfig({

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

        // Global variables
        config: {
            src: 'assets/src',
            dist: 'assets/dist',
            devUrl: 'tayloroyer.local:8888'
        },

        // Libsass
        sass: {
            minified: {
                options: {
                    sourceMap: true,
                    outputStyle: 'compressed', // expanded, nested, compressed
                },
                files: {
                    '<%= config.dist %>/css/main.min.css': '<%= config.src %>/sass/main.scss',
                    '<%= config.dist %>/css/no-mq.min.css': '<%= config.src %>/sass/no-mq.scss'
                }
            },
            expanded: {
                options: {
                    outputStyle: 'expanded'
                },
                files: {
                    '<%= config.dist %>/css/main.css': '<%= config.src %>/sass/main.scss',
                    '<%= config.dist %>/css/no-mq.css': '<%= config.src %>/sass/no-mq.scss'
                }
            }
        },

        // Clean CSS Output
        csscomb: {
            dist: {
                options: {
                    config: '<%= config.src %>/sass/csscomb.json'
                },
                files: {
                    '<%= config.dist %>/css/main.css': ['<%= config.dist %>/css/main.css'],
                    '<%= config.dist %>/css/no-mq.css': ['<%= config.dist %>/css/no-mq.css']
                }
            }
        },

        // Add vendor prefixed styles
        autoprefixer: {
            options: {
                browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= config.dist %>/css/',
                    src: '{,*/}*.css',
                    dest: '<%= config.dist %>/css/'
                }]
            }
        },

        // Concatenate JS Files
        concat: {
            main: {
                files: {
                    '<%= config.dist %>/js/main.js': '<%= config.src %>/js/main.js'
                }
            },
            plugins: {
                files: {
                    '<%= config.dist %>/js/plugins.js': [
                        '<%= config.src %>/js/plugins/boilerplate.js',
                        '<%= config.src %>/js/plugins/jquery.magnific-popup.js',
                        '<%= config.src %>/js/plugins/jquery.cycle2.js',
                        '<%= config.src %>/js/plugins/jquery.cycle2.swipe.js'
                    ]
                }
            }
        },

        // Minify JS
        uglify: {
            options: {
                sourceMap: true,
                preserveComments: 'some'
            },
            main: {
                files: {
                    '<%= config.dist %>/js/main.min.js': [ '<%= config.src %>/js/main.js' ]
                }
            },
            plugins: {
                files: {
                    '<%= config.dist %>/js/plugins.min.js': [ '<%= config.dist %>/js/plugins.js' ]
                }
            }
        },

        // Optimize Media
        imagemin: {
            images: {
                options: {
                    optimizationLevel: 3, // default
                    progressive: true // default
                },
                files: [{
                    expand: true,
                    cwd: '<%= config.src %>/img/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: '<%= config.dist %>/img/'
                }]
            }
        },

        // Copy Files/Folders
        copy: {
            js: {
                expand: true,
                cwd: '<%= config.src %>/js/plugins/',
                src: 'modernizr-2.8.3.min.js',
                dest: '<%= config.dist %>/js/plugins/',
            }
        },

        // Growl Notifications
        notify: {
            livereload: {
                options: {
                    title: 'Browser Updated',
                    message: 'Livereload completed.'
                }
            }
        },

        browserSync: {
            bsFiles: {
                src: [
                    '<%= config.dist %>/css/*.css',
                    '<%= config.dist %>/js/**/*.js',
                    '<%= config.dist %>/img/',
                    '**/*.php'
                ],
            },
            options: {
                // notify: false,
                // open: false,
                watchTask: true,
                proxy: '<%= config.devUrl %>'
            }
        },

        // Run Tasks When Files Are Modified
        watch: {
            css: {
                files: '<%= config.src %>/sass/**/*.{scss,sass}',
                tasks: [ 'sass:minified', 'autoprefixer' ], // We added autoprefixer here
                // tasks: [ 'sass', 'csscomb' ] // slower, but will process all CSS files
            },
            jsMain: {
                files: [
                    '<%= config.src %>/js/main.js'
                ],
                tasks: [ 'uglify:main' ]
            },
            jsPlugins: {
                files: [
                    '<%= config.src %>/js/plugins.js',
                    '<%= config.src %>/js/plugins/**/*.js'
                ],
                tasks: [ 'concat', 'uglify:plugins', 'newer:copy:js' ]
            },
            images: {
                files: [
                    '<%= config.src %>/img/**/*.{png,jpg,gif}'
                ],
                tasks: [ 'newer:imagemin' ]
            },
            // This can be used in place of BrowserSync
            // livereload: {
            //     options: {
            //         livereload: true,
            //         spawn: false
            //     },
            //     files: [
            //         '<%= config.dist %>/css/*.css',
            //         '<%= config.dist %>/js/**/*.js',
            //         '<%= config.dist %>/img/',
            //         // '**/*.php'
            //     ],
            //     tasks: [ 'notify:livereload' ]
            // }
        },

    });

    // Default
    grunt.registerTask( 'default', [
        'sass',
        'autoprefixer', // Adding autoprefixer task
        'csscomb',
        'concat',
        'uglify',
        'newer:copy:js',
        'newer:imagemin',
        'browserSync',
        'watch', // add after 'browserSync'. Not needed for Livereload
    ]);

    // Build
    // Run all tasks, including sass:expanded
    grunt.registerTask( 'build', [
        'sass',
        'autoprefixer', // Adding autoprefixer task
        'csscomb',
        'concat',
        'uglify',
        'newer:copy:js',
        'newer:imagemin',
    ]);

    // Images
    grunt.registerTask( 'media', ['newer:imagemin'] );

};

我真的建议你仔细阅读并参考软件包的文档。这不是你记忆中的事情;当谈到类似的东西时，人们总是会参考文档。

如何将“自动前缀”合并到“package.json”和“grunt.js”中？

1 个答案: