我无法在 grunt 中使用很多 contrib-sass 功能。一天前我潜入了咕噜声,我发现它真的很好。
链接到 contrib-sass repo,它说 sourcemaps 应该工作: https ://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037
注意:我有 sass 最前沿,如果我使用这个功能可以正常工作:sass --watch --scss --sourcemap --no-cache
with google chrome canary sourcemaps and Sass stylesheet debugging
这是我的 Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',
concat: {
options: {
separator: '\n// New file\n',
banner: '<%= banner %>'
},
develop: {
files: [
{ src: ['js/develop/plugins.js', 'js/develop/main.js'], dest: 'js/concDev.js' }
]
},
vendor: {
files: [
{ src: ['js/vendor/*.js', '!js/vendor/jquery-1.9.1.min.js', '!js/vendor/modernizr-2.6.2.min.js'], dest: 'js/concVend.js' }
]
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
develop: {
files: [
{ src: ['<%= concat.develop.files[0].dest %>'], dest: 'js/concDev.min.js' }
]
},
vendor: {
files: [
{ src: ['<%= concat.vendor.files[0].dest %>'], dest: 'js/concVend.min.js' }
]
}
},
removelogging: {
dist: {
files: [
{ src: ['js/concDev.min.js'], dest: 'js/concDev.min.js' },
{ src: ['js/concVend.min.js'], dest: 'js/concVend.min.js' },
{ src: ['js/concDev.js'], dest: 'js/concDev.js' },
{ src: ['js/concVend.js'], dest: 'js/concVend.js' }
]
}
},
jshint: {
files: ['gruntfile.js', 'js/develop/*.js'],
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
cssmin: {
compress: {
options: {
banner: '<%= banner %>'
},
files: [
{ src: ['css/main.css'], dest: 'css/main.min.css' }
]
}
},
imagemin: {
dynamic_mappings: {
files: [
{
expand: true,
cwd: 'img/',
src: ['**/*.png', '**/*.jpg'],
dest: 'img/',
ext: '.png'
}
]
}
},
sass: {
compressed: {
files: {
'css/main.css': 'css/develop/main.scss'
},
options: {
outputStyle: 'compressed'
}
},
nested: {
files: {
'css/main.css': 'css/develop/main.scss'
},
options: {
sourcemap: true,
outputStyle: 'nested'
}
}
},
rsync: {
deploy: {
src: "./",
dest: '<%= connection.dest %>', // i.e. "var/www"
host: '<%= connection.host %>', // i.e. "user@server.com"
recursive: true,
syncDest: false,
exclude: ["/node_modules", ".*"]
}
},
watch: {
options: {
livereload: true
},
html: {
files: '*.html'
},
js: {
files: ['js/develop/plugins.js', 'js/develop/main.js'],
tasks: ['jshint', 'concat:develop']
},
css: {
files: 'css/develop/main.scss',
tasks: ['sass:nested']
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks("grunt-remove-logging");
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-rsync');
// Task Lists
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', 'sass:nested']);
grunt.registerTask('server', ['watch']);
grunt.registerTask('deploy', ['sass:compressed', 'rsync' ]);
};
顺便说一句,正如我所说,我对 grunt 完全陌生,如果您在我的代码中发现其他不好的做法,请告诉我。也总是欢迎用于前端工作的伟大插件名称,我看到有很多,但只有一些 contrib 是熟悉的。
注意:不知何故,很多 sass 选项都不起作用,例如:noCache、lineNumbers、debugInfo、outputStyle:'compact'、'expanded'(压缩,嵌套工作 oO)
〜埃