I'm trying to create a gulp task with browserify and babelify. Here is the task:
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
gulp.task('js', function () {
browserify('./resources/js/*.js')
.transform(babelify)
.bundle()
.pipe(source('*.js'))
.pipe(gulp.dest('./public/js'));
});
I found a few sample code, tried to use them, but the result was always the same.
When i run the task, and save my example.js file, the following error occurs:
TypeError: browserify(...).transform is not a function
What am I doing wrong?
You're mixing up the API for browserify and gulp-browserify.
From the gulp-browserify docs, you'll want to do something like this:
var gulp = require('gulp')
var browserify = require('gulp-browserify')
gulp.task('js', function () {
gulp.src('./resources/js/*.js')
.pipe(browserify({
transform: ['babelify'],
}))
.pipe(gulp.dest('./public/js'))
});
EDIT: Since this question was first answered, gulp-browserify has been abandoned and gulp has evolved a great deal. If you'd like to achieve the same thing with a newer version of gulp, you can follow the guides provided by the gulp team.
You'll end up with something like the following:
var browserify = require('browserify');
var babelify = require('babelify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var util = require('gulp-util');
gulp.task('default', function () {
var b = browserify({
entries: './resources/test.js',
debug: true,
transform: [babelify.configure({
presets: ['es2015']
})]
});
return b.bundle()
.pipe(source('./resources/test.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
// Add other gulp transformations (eg. uglify) to the pipeline here.
.on('error', util.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/js/'));
});
Related
I'm trying to use Gulp as part of a React tutorial I'm walking through. After installing the dependencies I've been given;
AssertionError [ERR_ASSERTION]: Task function must be specified
This is the gulpfile.js which I am using
'use strict';
// dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var renamed = require('gulp-rename');
var changed = require('gulp-changed');
// - SCSS/CSS
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
// Compile SCSS
gulp.task('compile_scss', function(){
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
// detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, ['compile_scss']);
});
// Run tasks
gulp.task('default', ['watch_scss']);
And this outputs the following messages
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
The tutorial I am using was made in April 2017. Could it be something to do with conflicting versions?
Any help is appreciated.
The problem was I was using v3 gulp, the problem was solved by upgrading to v4.
The code is below.
'use strict';
// dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var renamed = require('gulp-rename');
var changed = require('gulp-changed');
// - SCSS/CSS
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
function compile_scss (done) {
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(renamed({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
done();
}
// detect changes in SCSS
function detect_change_scss (done) {
gulp.watch(SCSS_SRC)
done();
}
// Run tasks
gulp.task("compile_scss", gulp.series(compile_scss, detect_change_scss, ));
I have a gulp file, and when I run it only the JavaScript files get complied and the less files doesn't get compiled, and I cannot seem to understand why is this happening.
This is my gulp file:
'use strict';
var path = require('path');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var livereload = require('gulp-livereload');
var jsFiles = ['*.js', 'src/**/*.js'];
// js hints
gulp.task('hints', function(){
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {
verbose: true
}))
.pipe(jscs()); });
// less
gulp.task('less', function () {
return gulp.src('./public/src/less/main.less')
.pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] }))
.pipe(gulp.dest('./public/src/less/css')); });
// concat
gulp.task('concat', ['concat:css', 'concat:js']); gulp.task('concat:css', function() {
return gulp.src([
'public/lib/bower_components/bootstrap/dist/css/bootstrap.min.css',
'public/lib/bower_components/swiper/dist/css/swiper.min.css',
'public/lib/bower_components/font-awesome/css/font-awesome.min.css',
'public/src/less/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(gulp.dest('./public/build/')); }); gulp.task('concat:js', function() {
return gulp.src([
'public/lib/bower_components/jquery/dist/jquery.min.js',
'public/lib/bower_components/bootstrap/dist/js/bootstrap.min.js',
'public/lib/bower_components/swiper/dist/js/swiper.min.js',
'public/lib/bower_components/jquery.scrollTo/jquery.scrollTo.min.js',
'public/lib/bower_components/jquery.localScroll/jquery.localScroll.min.js',
'public/lib/bower_components/jquery-waypoints/lib/jquery.waypoints.min.js',
'public/lib/bower_components/gsap/src/uncompressed/TweenMax.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js',
'public/src/js/init.js',
'public/src/js/utils.js',
'public/src/js/main.js'
])
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/build/')); });
// watch
gulp.task('watch', ['watch:css', 'watch:js']);
gulp.task('watch:css', function () {
gulp.watch('public/src/less/*.less', ['less', 'concat:css']);
});
gulp.task('watch:js', function () {
gulp.watch('public/src/js/*.js', ['concat:js', 'hints']);
});
gulp.task('build', [ 'less', 'concat']);
gulp.task('development', [ 'less', 'concat', 'watch']);
When I run gulp development the css and js file gets created under the build folder but because the less files dont get compiled to css the css file under build folder has none of my styles.
Does someone know how to solve this issue?
Thank you
Below is a gulp task that has been created to compile angular2 tests written in typescript.
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var debug = require('gulp-debug');
var browserSync = require('browser-sync');
var $ = require('gulp-load-plugins')();
var typescript = require('typescript');
var tsTestProject = $.typescript.createProject({
target: 'es5',
sortOutput: true,
typescript: typescript,
experimentalDecorators: true
});
gulp.task('scripts-test', [], function () {
var gulpStream = gulp.src([
path.join(conf.paths.src, '/app/references.test.ts'),
path.join(conf.paths.src, '/app/**/*.spec.ts')
])
.pipe(debug())
.pipe($.sourcemaps.init())
.pipe($.typescript(tsTestProject)).on('error', conf.errorHandler('TypeScript'))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('tmptest'))
.pipe(browserSync.reload({ stream: true }))
.pipe($.size());
return gulpStream;
});
Here's the log related to the task.
[20:47:45] Starting 'scripts-test'...
[20:50:18] TypeScript: emit succeeded (with errors)
[20:50:18] Finished 'scripts-test' after 2.53 min
Yet no output files (typescripts compiled into js) are created to a tmptest folder as given in the task. gulp-debug shows that all the files given in gulp.src are acquired to the stream. Any idea as to why this is happening?
Goal
I'm updating my old gulpfile.js, which used to be mainly for compiling my Sass into CSS, but now I'm trying to get Gulp to do the following:
Sync browser, whip up localhost server - DONE
Compile Sass => CSS - DONE
Show any JavaScript errors with JSHint - DONE
Compile ES6 => ES6 with Babel (WORKING ON)
Minify all assets (WORKING ON)
Show project file size - DONE
Deploy index.html, style.css and images to S3 (WORKING ON)
Watch files, reload browser when .scss or .html changes - DONE
Problem
Trying to minify my Javascript and also create a scripts.min.js
file, it keeps adding the suffix min to every new minified JavaScript
file.
Folder structure
index.html
gulpfile.js
package.json
.aws.json
.csscomb.json
.gitignore
assets
- css
style.css
style.scss
--partials
---base
---components
---modules
- img
- js
scripts.js
- dist
gulpfile.js
// Include Gulp
var gulp = require('gulp');
var postcss = require("gulp-postcss");
// All of your plugins
var autoprefixer = require('autoprefixer');
var browserSync = require('browser-sync');
var cache = require('gulp-cache');
var concat = require('gulp-concat');
var csswring = require("csswring");
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var lost = require("lost");
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var rucksack = require("rucksack-css");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
// Sync browser, whip up server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Reload page automagically
gulp.task('bs-reload', function () {
browserSync.reload();
});
// Compile Sass into CSS, apply postprocessors
gulp.task('styles', function(){
var processors = [
autoprefixer({browsers: ['last 2 version']}),
csswring,
lost,
rucksack
];
gulp.src(['assets/css/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(postcss(processors))
// .pipe(gulp.dest('assets/css/'))
// .pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('assets/css/'))
.pipe(browserSync.reload({stream:true}))
});
// Show any JavaScript errors
gulp.task('scripts', function(){
return gulp.src('assets/js/**/*.js')
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(jshint())
.pipe(jshint.reporter('default'))
// .pipe(concat('main.js'))
// .pipe(babel())
.pipe(gulp.dest('assets/js/'))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(rename({suffix: '.min'}))
.pipe(browserSync.reload({stream:true}))
});
// Minify assets, create build folder
gulp.task('images', function(){
gulp.src('assets/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/img'));
});
// Minify HTML
// Default task
gulp.task('default', ['browser-sync'], function(){
gulp.watch("assets/css/**/*.scss", ['styles']);
gulp.watch("assets/js/**/*.js", ['scripts']);
gulp.watch("*.html", ['bs-reload']);
gulp.start("images", "styles", "scripts")
});
// var babel = require('gulp-babel');
// var minifyhtml = require("gulp-minify-html");
// var size = require("gulp-size");
// var upload = require("gulp-s3");
Hi i can't solve all your problems but I had also a similar issue with the babel and ES6 fat arrow functions (using babelify and browserify). To solve the problem try to pass:
stage: 0
to your babel.js gulp plugin. If error will still occurs then try to pass also:
experimental: true
For more information please have a look "experimental" section on babel.js site.
I'm following a tutorial on Reactjs and we're using a Gulpfile to update the dependancies and build a single javascript file using browserify.
For some reason there is no update whenever I change a line in a file..
This is my code.
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
gulp.task('default', function() {
var bundler = watchify(browserify({
entries: ['./src/app.jsx'],
transform: [reactify],
extensions: ['.jsx'],
debug: true
}));
function build(file) {
if (file) gutil.log('Recompiling ' + file);
return bundler
.bundle()
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('main.js'))
.pipe(gulp.dest('./'));
};
build();
bundler.on('update', build);
});
This is my folder structure
Watchify may have issues to detect the changes on certain filesystem setups and virtualization.
See https://github.com/substack/watchify/issues/120
try Watchify 3.0.0 as it seems to use a polling for NFS