css in gulp
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:
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.
.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'));
链接地址: http://www.djcxy.com/p/32928.html
上一篇: 当使用Watchify时,Browserify + Babelify Gulp任务不会终止
下一篇: css在吞咽