Question

尝试为项目设置我的gulp文件，我想编译较少的文件，然后将其缩小并将其保存到新文件夹中。

我的较少文件保存在app/less/styles.less中，已编译的css文件应保存到dist/css/styles.css，但保存到dist/css/less/styles.css。

我在这里做错了什么？

var app = 'app/',
dist = 'dist/',
appStyles = app + '**/*.less';

gulp.task('compilecssremote', function(){
  return gulp.src(appStyles)
  .pipe(plumber({
    errorHandler: onError
  }))
  .pipe(changed(dist)) //must be dist
  .pipe(urladjuster({
    prepend: '/' + project + '/dist/' //based on location of CSS files
  }))
  .pipe(less())
  .pipe(minifycss({keepBreaks: false}))
  .pipe(gulp.dest(dist + 'css'))
});

Answer 1

当您使用gulp.src之类的'app/**/*.less（也就是您的appStyles）来匹配源文件与app/less/styles.less之类的路径时，这是预期的行为。这里有两件事要理解：

默认情况下，gulp.src路径中第一个glob之前的所有内容都将从输出路径中省略。在这种情况下，这是**之前的所有内容，也就是app/。这就是您的输出css文件不转到'dest/app/…的原因。（有关此问题的更详细讨论，请参阅this answer）
第一个glob和on匹配的路径保留在输出路径中。在这种情况下，这是匹配文件less/中的'app/less/styles.less'（即'app/**/*.less'所代表的**部分）。（在问题的情况下，它不是重点，但此功能对于保留相关文件结构非常有用。）

使用＃1＆amp; ＃2，一个快速解决方法是通过将less/放在gulp.src中的第一个glob之前从输出路径中修剪appStyles = app + 'less/**/*.less'。例如，更改export const MakeMainRoutes = (props) => { return ( <Router history={browserHistory}> <Route path="/" component={Container} auth={auth}> <IndexRedirect to="/home" /> <Route path="home" component={Home} onEnter={requireAuth} /> <Route path="login" component={Login} onEnter={parseAuthHash} /> </Route> </Router> ) } export default MakeMainRoutes class Form extends React.Component { static propTypes = { children: PropTypes.node, values: PropTypes.object, update: PropTypes.func, reset: PropTypes.func, onSubmit: PropTypes.func } static childContextTypes = { update: PropTypes.func, reset: PropTypes.func, submit: PropTypes.func, values: PropTypes.object } getChildContext() { return { update: this.props.update, reset: this.props.reset, submit: this.submit, values: this.props.values }; } render() { return ( <form> {this.props.children} </form> ) } } export default Form import React, { PropTypes } from 'react'; import TextField from 'material-ui/TextField'; import * as validators from '../../libs/validators' class Text extends React.Component { static propTypes = { name: PropTypes.string.isRequired, placeholder: PropTypes.string, label: PropTypes.string }; static contextTypes: { update: PropTypes.func.isRequired, values: PropTypes.object.isRequired }; updateValue(value) { this.context.update(this.props.name, value); } onChange(event) { this.updateValue(event.target.value) } render() { return ( <div> <TextField hintText={this.props.placeholder} floatingLabelText={this.props.label} value={this.context.values[this.props.name]} onChange={this.onChange}/> </div> ) } } export default Text。

Gulp，css保存到dist / css / less，应该是dist / css

1 个答案: