使用 Libsass/Grunt 时有没有办法即时观看文件?
When using Libsass/Grunt is there a way to watch files on the fly?
我已经使用
安装了 Foundation 5
>gem install foundation
然后使用命令
创建一个新项目
>foundation scratch --libsass
主要原因是我在 Windows 而且我真的 need/want 不想使用指南针。我知道在更改 sass 文件后,我可以 运行
>grunt build
为了根据我对 .scss
文件所做的更改来更新我的 css 文件。一切正常。
问题:有没有一种方法可以观看这些 .scss
文件,这样我就不必在每次保存文件时都执行 运行 该命令。有点像我以前用 >compass watch
做的? package.json
中有一个名为 grunt-contrib-watch
的开发依赖项,是吗?如果可以,我该如何使用它?
这是安装完成后的 G运行t 文件:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed',
sourceMap: true,
},
files: {
'css/app.css': 'scss/app.scss'
}
}
},
watch: {
grunt: {
options: {
reload: true
},
files: ['Gruntfile.js']
},
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
如果有人能提供帮助,在此先感谢!
好的,所以我做了一些侦查并查看了 g运行t 文件,尽管我对 g运行t 不是很好,但我看到了这个:
watch: {
grunt: {
options: {
reload: true
},
files: ['Gruntfile.js']
},
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
有了这个我假设我可以 运行:
>grunt watch
我知道,我可能不是棚子里最聪明的工具,但我是新手,没有意识到当我以这种方式安装 Foundation 时它也安装了这个 grunt-contrib-watch
依赖项。抱歉,如果这个问题太明显,也许它会对某人有所帮助,因为我很难找到答案,即使它在我不习惯使用的 package.json 中。
我已经使用
安装了 Foundation 5>gem install foundation
然后使用命令
创建一个新项目>foundation scratch --libsass
主要原因是我在 Windows 而且我真的 need/want 不想使用指南针。我知道在更改 sass 文件后,我可以 运行
>grunt build
为了根据我对 .scss
文件所做的更改来更新我的 css 文件。一切正常。
问题:有没有一种方法可以观看这些 .scss
文件,这样我就不必在每次保存文件时都执行 运行 该命令。有点像我以前用 >compass watch
做的? package.json
中有一个名为 grunt-contrib-watch
的开发依赖项,是吗?如果可以,我该如何使用它?
这是安装完成后的 G运行t 文件:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed',
sourceMap: true,
},
files: {
'css/app.css': 'scss/app.scss'
}
}
},
watch: {
grunt: {
options: {
reload: true
},
files: ['Gruntfile.js']
},
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
如果有人能提供帮助,在此先感谢!
好的,所以我做了一些侦查并查看了 g运行t 文件,尽管我对 g运行t 不是很好,但我看到了这个:
watch: {
grunt: {
options: {
reload: true
},
files: ['Gruntfile.js']
},
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
有了这个我假设我可以 运行:
>grunt watch
我知道,我可能不是棚子里最聪明的工具,但我是新手,没有意识到当我以这种方式安装 Foundation 时它也安装了这个 grunt-contrib-watch
依赖项。抱歉,如果这个问题太明显,也许它会对某人有所帮助,因为我很难找到答案,即使它在我不习惯使用的 package.json 中。