运行我的 gulp 任务以管理 css 时，“意外的令牌：punc ({)”是什么意思？答案

【问题标题】：What does 'Unexpected token: punc ({)' mean while running my gulp task for managing css?运行我的 gulp 任务以管理 css 时，“意外的令牌：punc ({)”是什么意思？
【发布时间】：2014-10-22 14:36:04
【问题描述】：

这非常适合脚本任务。但是当我运行我的 gulp 任务来输出我的 css 时，我得到了这个错误：

`Unexpected token: punc ({)`

该任务似乎在“开发”中有效，但在生产中无效。

This is the whole gulpfile.js

这些是我设置的变量。

var env,
jsSources,
sassSources,
outputDir;

jsSources = ['components/js/**/*.js'];
sassSources = ['components/scss/**/*.scss'];


 env = process.env.NODE_ENV || 'development';

 if (env === 'development'){
    outputDir = 'builds/development/';
    sassStyle = 'expanded';
 } else {
    outputDir = 'builds/production/';
    sassStyle = 'compressed';
 }

这是css任务：

gulp.task('css', function() {
return gulp.src(sassSources) // we use addsrc to add our .js files to the mix
    .pipe(sass())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(addsrc(mainBowerFiles())) 
    .pipe(filter('*.css'))
    .pipe(order([
        'normalize.css',
        '*'
    ]))
    .pipe(concat('main.css'))
    .pipe(gulpif(env === 'production', uglify()))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(plumber())
        .pipe(notify({
            message: "Sass tasks have been completed!"
        }))
        .pipe(gulp.dest(outputDir + 'css'))
});

【问题讨论】：

你确定这不是 CSS 语法错误吗？
嗯，不确定。在development 中运行时，我确实得到了一个输出文件（实际的 .css 文件），我尝试通过 linter 运行该文件，但没有收到括号错误。
好的。你不应该用分号结束return 语句吗？（在 gulpfile 的第 47 和 69 行）
啊，我以为可以做到！但不是！不过谢谢！
This -> ".. 将我们的 .js 文件添加到组合中"。你到底为什么要那样做？ :D。你有没有机会尝试用gulp-uglify 缩小css？

标签： javascript css gulp

【解决方案1】：

总之Heikki comment。不要在 CSS 文件上使用uglify，使用uglifycss。

【讨论】：