我正在使用Yeoman我找不到触发 CSS task 的方法文件更改后。
我有一个像这样的元素结构
\ app -----\ module1 ------- style.css -----\ module2 ------- style.css -----\ module3 ------- style.css -----\ styles ------- main.css
and I'd like Yeoman to
- watch all the CSS files within the modules;
- trigger the CSS concat/minification task;
- overwrite
app/styles/main.css
.
Here's my Gruntfile.js
:
module.exports = function( grunt ) {
'use strict';
//
// Grunt configuration:
//
// https://github.com/cowboy/grunt/blob/master/docs/getting_started.md
//
grunt.initConfig({
// Project configuration
// ---------------------
// specify an alternate install location for Bower
bower: {
dir: 'app/components'
},
// Coffee to JS compilation
coffee: {
compile: {
files: {
// 'app/scripts/*.js': 'app/scripts/**/*.coffee',
// 'test/spec/*.js': 'test/spec/**/*.coffee'
}
}
},
// compile .scss/.sass to .css using Compass
compass: {
dist: {}
},
// default watch configuration
watch: {
reload: {
files: [
'Gruntfile.js',
'app/*.html',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*',
'app/app/**/*'
],
tasks: 'css reload'
}
},
// default lint configuration, change this to match your setup:
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#lint-built-in-task
lint: {
files: [
'Gruntfile.js',
'app/scripts/**/*.js',
'spec/**/*.js'
]
},
// specifying JSHint options and globals
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#specifying-jshint-options-and-globals
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
angular: true
}
},
// Build configuration
// -------------------
// the staging directory used during the process
staging: 'temp',
// final build output
output: 'dist',
mkdirs: {
staging: 'app/'
},
// Below, all paths are relative to the staging directory, which is a copy
// of the app/ directory. Any .gitignore, .ignore and .buildignore file
// that might appear in the app/ tree are used to ignore these values
// during the copy process.
// concat css/**/*.css files, inline @import, output a single minified css
css: {
'app/styles/main.css': ['app/styles/*.css', 'app/app/**/*.css']
},
// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
js: 'scripts/**/*.js',
css: 'styles/**/*.css',
img: 'images/**'
},
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// update references in HTML/CSS to revved files
usemin: {
html: ['**/*.html'],
css: ['**/*.css']
},
// HTML minification
html: {
files: ['**/*.html']
},
// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
dist: '<config:rev.img>'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
}
});
// Alias the `test` task to run `testacular` instead
grunt.registerTask('test', 'run the testacular test driver', function () {
var done = this.async();
require('child_process').exec('testacular start --single-run', function (err, stdout) {
grunt.log.write(stdout);
done(err);
});
});
};
最佳答案
我是 grunt 新手,但我编写自定义监视任务的方法是这样的。首先,我注册了一个新任务,其中仅包含我在开发时想要运行的事情。例如,我希望我的元素能够针对未缩小的 js 运行。所以我不要求执行 min 或 concat 任务。只需检查它们、测试它们并使用 grunt-targethtml
重写开发模式的 html。
grunt.registerTask('devel', 'lint qunit targethtml');
然后我替换默认的 watch
配置来运行 devel
任务
watch: {
files: '<config:lint.files>',
tasks: 'devel'
}
这是使用为 lint 任务定义的文件列表,但您应该能够将其替换为
files: ['app/**/*.css']
关于css - 在 Yeoman 后台连续 CSS 连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13536784/