我是网页设计的新手，你可以想象，尝试成为一个拥有 SaSS、NPM 和 Grunt 等东西的全栈开发人员是一个巨大的学习曲线。我有一个样板的 WordPress 主题，它结合了一个带有 sass、一个 minifier、BrowserSync 和所有有趣的东西的 grunt 工作流。但它在工作流程中没有自动前缀，我想添加它，因为我想开始测试 FlexBox 设计，这需要大量前缀才能正常工作。我在网上搜索了如何简单地添加Auto Prefixer到gruntfile所有答案都非常模糊，如“只需将此代码添加到grunt.js文件中”之类的说明......好吧，文件中的确切位置？这应该是一个“后处理”，而grunt.js似乎是按照完成任务的顺序编写的。我也不熟悉任何语法，所以只是说“包含它”并没有帮助，我总是担心我没有正确地将它放在某个括号之后或分号之前。我只是希望有人明确告诉我我需要将代码放在grunt.js文件中的哪个位置。
作为奖励，我想将此添加到我的package.json文件中，以便将来当我开始一个新项目并运行我的初始“安装 npm”命令时，它将下载auto prefixer并准备好出门。
所以tldr; 如何下载自动前缀？（它是文件夹中的一组文件吗？文件文件夹应该在我的项目中的哪个位置，以防我最初通过命令行将它安装在错误的位置）我需要在哪里添加自动前缀代码我的Grunt.js档案？最后，当我第一次键入“install npm”时，我需要在我的文件中放入什么以及在哪里package.json确保 autoprefixer 包含在我未来的项目中？
我将包括我当前的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文件：
{
"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"
}
}