CODEWITHSUNDEEP
javascriptcssgulp
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7729

What does 'Unexpected token: punc ({)' mean while running my gulp task for managing css?

This works superbly for the scripts task. But when I run my gulp task to output my css I get this error:

`Unexpected token: punc ({)`

The task seems to work in 'development' but not in production.

This is the whole gulpfile.js

These are my variables which I set.

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';
 }

And this is css task:

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'))
});

Upvotes: 2

Views: 1482

Answers (1)

Damonsson
Damonsson

Reputation: 1532

So in summary Heikki comment. Don't use uglify on CSS files, use uglifycss.

Upvotes: 1

Related Questions