如何将"Auto Prefixer"合并到"package.json"和"grunt.js"中？
How to incorporate "Auto Prefixer" into "package.json" and "grunt.js"?
我是网页设计的新手，正如您想象的那样，尝试成为一名拥有 SaSS、NPM 和 G运行t 等东西的全栈开发人员是一个巨大的学习曲线.我有一个样板 WordPress 主题，其中包含一个 g运行t 工作流程和 sass、一个缩小器、BrowserSync 和所有有趣的东西。但它在工作流程中没有自动前缀，我想添加它，因为我想开始测试 FlexBox 设计，这需要大量前缀才能正常工作。我在网上搜索了如何简单地将 Auto Prefixer 添加到 gruntfile 并且所有答案都非常模糊，其中包含 "just add this code to the grunt.js file" 之类的说明...好吧，文件中的确切位置？这应该是 "post-process" 而 grunt.js 似乎是按照完成任务的顺序编写的。我也不熟悉任何语法，所以只是说 "include it" 没有帮助，我总是担心我没有把它放在某个括号之后或分号之前正确。我只是希望有人明确地告诉我我需要将代码放在 grunt.js 文件中的什么位置。
作为奖励，我想将它添加到我的 package.json 文件中，以便将来当我开始一个新项目并且我 运行 我的初始 "install npm" 命令时，它将下载 auto prefixer 并准备好走出大门。
太长了；
如何下载自动前缀程序？ （它是文件夹中的一组文件吗？文件文件夹应该在我的项目中的确切位置，以防万一我最初通过命令行将它安装在错误的位置）
我究竟需要在 Grunt.js 文件中的什么地方添加自动前缀代码？
最后，当我第一次输入 "install npm" 时，我到底需要在我的 package.json 文件中放入什么以及在哪里，以确保在我未来的项目中包含 autoprefixer？
我将包括我当前的 Grunt.js 文件和 package.json 文件，这样你们中的一个人就可以简单地 copy/paste 为我添加必要的代码。这将帮助我了解如何在我的工作流程中添加新流程。
这是我的 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，那么只会将 this package 安装到您的项目中。如果您添加了标志 --save，该标志会将此包添加到 packages.json。这样，如果您从版本控制中忽略 node_modules 目录，您可以键入 npm install 它将自动获取。
澄清一下，添加标志意味着您键入如下命令：
npm install grunt-autoprefixer --save
现在开始使用它。通常，为了在 grunt 中使用任何包，您会发现文档告诉您将其包含在文件顶部
grunt.loadNpmTasks('grunt-package-name'); // e.g grunt-autoprefixer
幸运的是，我们有一个 grunt 任务可以自动检查 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'] );
};
我真的建议您仔细阅读它并参考包的文档。这不是你凭记忆做的事情；当涉及到类似的东西时，人们总是会参考文档。
我是网页设计的新手，正如您想象的那样，尝试成为一名拥有 SaSS、NPM 和 G运行t 等东西的全栈开发人员是一个巨大的学习曲线.我有一个样板 WordPress 主题，其中包含一个 g运行t 工作流程和 sass、一个缩小器、BrowserSync 和所有有趣的东西。但它在工作流程中没有自动前缀，我想添加它，因为我想开始测试 FlexBox 设计，这需要大量前缀才能正常工作。我在网上搜索了如何简单地将 Auto Prefixer 添加到 gruntfile 并且所有答案都非常模糊，其中包含 "just add this code to the grunt.js file" 之类的说明...好吧，文件中的确切位置？这应该是 "post-process" 而 grunt.js 似乎是按照完成任务的顺序编写的。我也不熟悉任何语法，所以只是说 "include it" 没有帮助，我总是担心我没有把它放在某个括号之后或分号之前正确。我只是希望有人明确地告诉我我需要将代码放在 grunt.js 文件中的什么位置。
作为奖励，我想将它添加到我的 package.json 文件中，以便将来当我开始一个新项目并且我 运行 我的初始 "install npm" 命令时，它将下载 auto prefixer 并准备好走出大门。
太长了；
如何下载自动前缀程序？ （它是文件夹中的一组文件吗？文件文件夹应该在我的项目中的确切位置，以防万一我最初通过命令行将它安装在错误的位置）
我究竟需要在 Grunt.js 文件中的什么地方添加自动前缀代码？
最后，当我第一次输入 "install npm" 时，我到底需要在我的 package.json 文件中放入什么以及在哪里，以确保在我未来的项目中包含 autoprefixer？
我将包括我当前的 Grunt.js 文件和 package.json 文件，这样你们中的一个人就可以简单地 copy/paste 为我添加必要的代码。这将帮助我了解如何在我的工作流程中添加新流程。
这是我的 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，那么只会将 this package 安装到您的项目中。如果您添加了标志 --save，该标志会将此包添加到 packages.json。这样，如果您从版本控制中忽略 node_modules 目录，您可以键入 npm install 它将自动获取。
澄清一下，添加标志意味着您键入如下命令：
npm install grunt-autoprefixer --save
现在开始使用它。通常，为了在 grunt 中使用任何包，您会发现文档告诉您将其包含在文件顶部
grunt.loadNpmTasks('grunt-package-name'); // e.g grunt-autoprefixer
幸运的是，我们有一个 grunt 任务可以自动检查 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'] );
};
我真的建议您仔细阅读它并参考包的文档。这不是你凭记忆做的事情；当涉及到类似的东西时，人们总是会参考文档。