我正在尝试基于 Yeoman 的生成器运行 AngularJS 项目，但使用 Zurb Foundation 5.5.3
我读过 Foundation 5.4 如果使用 Sass 3.4.2 编译会出现一些问题，但显然 Foundation 5.5 保留了它。当我尝试运行 sass 任务时，由于弃用警告，构建过程失败。这是日志：
Running "wiredep:sass" (wiredep) task
Running "concurrent:server" (concurrent) task
Warning: DEPRECATION WARNING on line 78 of C:/Users/lperea/Documents/Proyectos/Kairos/kronos-imasd-frontend/bower_components/foundation/scss/foundation/components/_top-bar.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:
unquote("#{lower-bound($medium-range)}") Use --force to continue.
这是我的 Gruntfile：
/**
* Created by lperea on 12/01/2016.
*/
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function(grunt) {
// Carga automatica de tareas que matcheen con los patrones especificados
require('load-grunt-tasks')(grunt, {pattern: ['grunt-*', '@*/grunt-*']});
// Visualizacion del tiempo consumido por cada tarea
require('time-grunt')(grunt);
// Carga automatica de plugins para ejecutar tareas de Grunt
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn'
});
// Paths configurables de la aplicacion
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: 'dist'
};
// Configuracion inicial de todas las tareas
grunt.initConfig({
// Generador dinamico de constantes y modulos
ngconstant: {
options: {
space: ' ',
name: 'config',
dest: 'app/scripts/config.js',
values: {
debug: true
}
},
dev: {
constants: grunt.file.readJSON('devconfig.json')
},
test: {
constants: grunt.file.readJSON('testconfig.json')
},
prod: {
constants: grunt.file.readJSON('prodconfig.json')
},
build: {}
},
// Ajustes del proyecto
yeoman: appConfig,
// Ajustes del servidor de Grunt
connect: {
options: {
port: 9000,
hostname: 'localhost', // '0.0.0.0' -> para acceso remoto al servidor.
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
dist: {
options: {
open: true,
base: '<%= yeoman.dist %>'
}
}
},
// Verifica cambios en archivos y ejecuta las tareas indicadas
watch: {
bower: {
files: ['bower.json'],
tasks: [
'wiredep' // Inyeccion de componentes bower en la aplicacion
]
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: [
'compass:server', // Compila sass a css
'autoprefixer:server' // Preprocesa el css generado
]
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['copy:styles', 'autoprefixer']
},
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: [
'newer:jscs:all' // Verificacion jscs
],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: [
'newer:jscs:test', // Verificacion jscs
'karma' // Ejecucion de tests con karma
]
},
gruntfile: {
// No se hace nada si cambia el gruntfile
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
// TODO: Reemplazar con grunt-postcss
autoprefixer: {
options: {
browsers: ['last 1 version']
},
server: {
options: {
map: true
},
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Compila Sass a CSS y genera los archivos necesarios si se lo solicita
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
//generatedImagesDir: '.tmp/images/generated',
//imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true,
sourcemap: true
}
}
},
// Verifica estilos de codigo en base a jscs
jscs: {
options: {
config: '.jscsrc',
reporter: require('jscs-stylish').path,
esnext: true, // If you use ES6 http://jscs.info/overview.html#esnext
verbose: true,
requireCurlyBraces: ['if']
},
all: {
src: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
},
test: {
options: {
config: 'test/.jscsrc',
reporter: require('jscs-stylish').path,
esnext: true, // If you use ES6 http://jscs.info/overview.html#esnext
verbose: true,
requireCurlyBraces: ['if']
},
src: ['test/spec/{,*/}*.js']
}
},
// Elimina carpetas temporales y de distribucion
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/{,*/}*',
'!<%= yeoman.dist %>/.git{,*/}*'
]
}]
},
server: '.tmp'
},
// Inyeccion automatica de componentes de bower en la aplicacion
// TODO: verificar si esta bien ignorar el path de bower_components
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
sass: {
dist: {
options: {
style: 'expanded',
loadPath: ['bower_components/foundation/scss']
}
}
},
// Agrega un hash al nombre de los archivos para cacheo del browser
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
},
// Lee bloques de usemin en los HTML para hacer builds que ejecuten las tareas
// de concat, minify and revision files. Crea configuraciones en memoria para que
// otras tareas puedan utilizarlas
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Reescribe archivos en funcion de la configuracion de filerev y useminPrepare
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images']
}
},
// Compresion de imagenes
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
// Compresion de archivos svg
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/images'
}]
}
},
// Minificacion html
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: false,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html', 'views/{,*/}*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// Transforma inyecciones de dependencia a la version larga de Angular (seguro para la minificacion))
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: ['*.js', '!oldieshim.js'],
dest: '.tmp/concat/scripts'
}]
}
},
// Reemplaza referencias locales a referencias CDN
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
// Copia archivos a ubicaciones que utilizan otras tareas
// TODO: elminar copia de archivos bootstrap y chequear copiado de componentes de bower.
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>', // Directorio base
dest: '<%= yeoman.dist %>', // Destino de archivos a copiar
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'bower_components/**/*/*.css',
'images/{,*/}*.{webp}',
'fonts/{,*/}*.*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
//For font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: ['{,*/}*.css', 'bower_components/**/*/*.css']
},
fonts: {
expand: true,
flatten: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>/fonts',
src: [
'bower_components/font-awesome/fonts/*'
]
}
},
// Ejecucion de tareas en paralelo
concurrent: {
server: [
'compass:server'
],
test: [
'compass'
],
dist: [
'compass:dist',
'imagemin',
'svgmin'
]
},
// Ajustes de la ejecucion de tests
karma: {
unit: {
configFile: 'test/karma.conf.js',
singleRun: true
}
}
});
grunt.registerTask(
'serve',
'Compila y luego inicia conexion a un servidor web',
function(target) {
if (target === 'dist') {
grunt.task.run([
'ngconstant:dev',
'build',
'connect:dist:keepalive'
]);
} else {
grunt.task.run([
'ngconstant:dev',
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
}
});
grunt.registerTask(
'test',
'Compila y ejecuta los tests unitarios',
function(target) {
if (!target) {
target = 'dev';
}
switch (target) {
case 'dev':
grunt.task.run(['ngconstant:dev']);
break;
case 'test':
grunt.task.run(['ngconstant:test']);
break;
case 'prod':
grunt.task.run(['ngconstant:prod']);
break;
}
grunt.task.run([
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);
});
grunt.registerTask(
'build',
'Compila y prepara codigo minificado en una carpeta aparte',
function(target) {
if (!target) {
target = 'dev';
}
switch (target) {
case 'dev':
grunt.task.run(['ngconstant:dev']);
break;
case 'test':
grunt.task.run(['ngconstant:test']);
break;
case 'prod':
grunt.task.run(['ngconstant:prod']);
break;
}
grunt.task.run([
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
});
grunt.registerTask('default', [
'newer:jscs',
'ngconstant:dev',
'test',
'build'
]);
};
我正在使用指南针 1.0.3 和 sass 3.4.2。