如何将“Auto Prefixer”合并到“package.json”和“grunt.js”中？
我是一个网页devise的新手，正如你所想象的，尝试成为一个像SaSS，NPM和Grunt这样的全栈开发者是一个巨大的学习曲线。 我有一个样板WordPress主题，包含一个粗鲁的工作stream程与sass，缩小器，BrowserSync和所有有趣的东西。 但在工作stream程中没有autoprefixer，我想添加它，因为我想开始testingFlexBoxdevise，并需要大量的前缀才能正常工作。 我在网上search了如何简单地将Auto Prefixer添加到gruntfile ，所有的答案都是超级含糊的，就像“只要把这个代码添加到grunt.js文件”一样。 这应该是一个“后处理”， grunt.js似乎是按照它将完成任务的顺序编写的。 我也不熟悉任何的语法，所以只是说“包含它”没有帮助，我总是担心我没有把它放在一定的括号之后或分号正确之前。 我只想让别人明确地告诉我，我需要把代码放在grunt.js文件中。
作为奖励，我想把这个添加到我的package.json文件中，以便将来当我启动一个新项目并运行我的初始“install npm”命令时，它将下载auto prefixer并准备出去大门。
SO tldr; 如何下载自动前缀？ （这是文件夹中的一组文件？在我的项目中应该在哪里文件的文件夹去，以防万一我安装在错误的地方最初通过命令行）在哪里我需要添加autoprefixer代码我的Grunt.js文件？ 最后，在我第一次input“install npm”的时候，我需要在我的package.json文件中包含哪些内容以确保autoprefixer包含在将来的项目中？
我将包括我当前的Grunt.js文件和package.json文件，这样你们就可以简单地复制/粘贴必要的代码给我。 这将帮助我在未来知道如何将新stream程添加到我的工作stream程。
这是我的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文件：
{ "name": "wordpress-theme", "version": "1.0.0", "description": "WordPress theme", "devDependencies": { "grunt": "^0.4.5", "grunt-browser-sync": "^2.1.1", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-copy": "^0.8.0", "grunt-contrib-imagemin": "^0.9.4", "grunt-contrib-uglify": "^0.9.1", "grunt-contrib-watch": "^0.6.1", "grunt-csscomb": "^3.0.0", "grunt-newer": "^1.1.0", "grunt-notify": "^0.4.1", "grunt-sass": "^0.18.1", "load-grunt-tasks": "^3.1.0", "time-grunt": "^1.0.0" }, "repository": { "type": "git", "url": "https://github.com/blainerobison/_s.git" } }
如果您使用npm install grunt-autoprefixer ，只需将此软件包安装到您的项目中即可。 如果你添加了标志 – 保存将把这个包添加到packages.json 。 这样，如果您忽略了版本控制中的node_modules目录，则可以键入npm install并自动获取它。
为了澄清，添加标志意味着你像这样键入命令：
npm install grunt-autoprefixer --save
现在开始使用它。 通常情况下，为了在grunt中使用任何软件包，您会发现该文档告诉您将其包含在文件的顶部
grunt.loadNpmTasks('grunt-package-name'); // eg grunt-autoprefixer
幸运的是，我们有一个可以自动检查package.json文件中的所有grunt任务的咕task任务，并且不需要手动包含上面提到的那一行。 这是你的文件上的这一行
// Load all grunt tasks matching the 'grunt-*' pattern require( 'load-grunt-tasks' )( grunt );
现在configuration任务，我已经修改你的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'] ); };
我真的会推荐你仔细阅读，并参考软件包的文档。 这不是你记忆中的事情; 当涉及到类似的东西时，人们总是提到文档。