[英]Compiling less files with Grunt
在这里完成对Grunt的新手培训,但基本上,我正在尝试使用Grunt做一些事情。 缩小一个JS文件,然后将多个LESS文件编译为一个CSS文件。
javascript位有效,即我的文件custom.js压缩为一个名为custom.min.js的文件,但是LESS位根本不起作用(没有错误,只是无法编译)。 谁能看到为什么呢?
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'scripts/custom.js',
dest: 'scripts/custom.min.js'
}
},
less: {
build: {
src: 'less/*.less',
dest: 'style.css'
}
},
watch: {
files: ['scripts/custom.js'],
tasks: ['uglify','less']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
您根本不需要调用LESS任务。 要调用它,请在已注册的任务中添加任务名称
grunt.registerTask('default', ['uglify','less']);
请参阅文档以了解有关任务注册的更多信息: http : //gruntjs.com/creating-tasks
编辑:
我看到您创建了一个watch
任务,因此,如果您不是手动调用LESS任务而是通过监视文件,请确保在修改文件之前已在终端中执行grunt watch
(并且未关闭终端窗口)
您应该在watch语句中包含对less任务的调用,例如:
watch: {
livereload: {
options: { livereload: true },
files: ["public/css/main.css", "public/css/less/*.less", "public/html/*.html", "public/js/*.js"]
},
scripts: {
files: ["public/js/*.js"],
tasks: ["jshint"]
},
less: {
files: ["public/css/*.less", "public/css/less/*.less"],
tasks: ["less", "csslint"],
options: {
nospawn: true
}
}
},
less: {
development: {
options: {
compress: true,
yuicompress: false,
optimization: 2,
cleancss:false,
paths: ["css"],
syncImport: false,
strictUnits:false,
strictMath: true,
strictImports: true,
ieCompat: false
},
files: {
"public/css/main.css": "public/css/main.less"
}
}
}
然后只需向watch注册默认任务:
grunt.registerTask("default", ["express", "open:dev", "watch"]);
将所有较少的文件移动到一个文件,如下所示:
Somefile.less:
@import '../bootstrap/bootstrap.less';
@import 'site.less';
并尝试以下操作:
less: {
build: {
files: {
'style.css': 'less/somefile.less'
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.