using browserify-css in gulp

Question

i'm using gulp + browserify to use ES2015 and react jsx. i want to add some external react component like this one: DataPicker.

it was first time to ad external react component in my project so i didn't know that css is also need to import.

but i'm not using webpack, i just use gulp. these are my node-modules for gulp:

vinyl-source-stream
vinyl-buffer
browserify
babelify
babel-preset-es2015
babel-preset-react

and this is my gulpfile:

gulp.task('build', function() {
    return browserify('./app.js')
    .transform(babelify, { presets: ["es2015", "react"] }
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));
});

i found that using import/require css in javascript need "browserify-css", so i added with "npm install browserify-css". and then i add transform method to my gulpfile like this:

gulp.task('build', function() {
    return browserify('./app.js')
    .transform(babelify, { presets: ["es2015", "react"] }
    .transform(require('browserify-css'))
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));
});

but it has just throw weired error like this:

events.js:154, throw er; // Unhandled 'error' event, SyntaxError: Unexpected token

did i wrong with using browserify-css into my gulpfile? what am i do? it will be very appreciate gimme some advice.

LMS5400 LMS5400 · Accepted Answer · 2016-06-10T22:36:10

.transform(babelify, { presets: ["es2015", "react"] }
.transform(require('browserify-css'))

Thats just a syntax issues because you're trying to use the dot operator on an object literal.

maybe try something like this...

var appBundler = browserify({
    entries: ['./app.js'],
    transform: [
      ['babelify', {
          "presets": ['es2015', 'react']
        }
      ],
      ['browserify-css']
    ]
    });

  appBundler.bundle()
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));

using browserify-css in gulp

1 Answers