Gulp/Babelify es6 - javascript

I am using babel to transpile my es6 code. I'm also using gulp to do the tasks. My gulpfile.js looks like the following :
var gulp = require('gulp'),
es6Path = './src/*.js',
browserify = 'browserify',
babelify = require('babelify'),
source = require('vinyl-source-stream');
gulp.task('build', function () {
return browserify({entries: './src/script.js', extensions: ['.js'], debug: true})
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('watch', ['build'], function () {
gulp.watch(es6Path, ['build']);
});
gulp.task('default', ['watch']);
But when I try to run gulp , I get this error :
Starting 'build'...
'build' errored after 100 μs
TypeError: string is not a function
Any idea why this happens ?

You set browserify to string 'browserify' then try to call it as a function. You need to require('browserify').

Related

Gulp error: The following tasks did not complete: Async Issue

I am kind of new to gulp and I am getting this error after updating gulp-sass to 5.0. I tried different thing from internet but didn't get it to work.
Gulp version : 4.0.0
Gulp sass : 5.0.0
sass : 1.38.1
Here is my gulpfile.js
var sourcemaps = require('gulp-sourcemaps');
var mode = require('gulp-mode')();
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass')(require('sass'));
var $ = require('gulp-load-plugins')();
var autoprefixer = require('autoprefixer');
var isProduction = mode.production();
var sassPaths = [
// 'node_modules/foundation-sites/scss',
// 'node_modules/motion-ui/src'
];
function sass() {
return gulp.src('assets/sass/theme.scss')
.pipe(mode.development(sourcemaps.init()))
.pipe($.sass.sync(({
includePaths: sassPaths,
outputStyle: 'compressed' // if css compressed **file size**
})).on('error', $.sass.logError))
.pipe($.postcss([
autoprefixer({ overrideBrowserslist: ['last 2 versions', 'ie >= 9'] })
]))
.pipe(mode.development(sourcemaps.write()))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
};
function serve() {
browserSync.init({
server: "./"
});
gulp.watch("assets/sass/**/*.{scss,sass}", sass);
gulp.watch("*.html").on('change', browserSync.reload);
}
gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));
if( isProduction ){
gulp.task('default', gulp.series(sass));
}
You have a couple of issue:
Don't name your task sass and your require object also sass. Pick a different name for one of them.
This is strange:
gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));
All you need is
gulp.task('serve', gulp.series(sass2, serve));
gulp.task('default', gulp.series(sass2, serve));
Just use your task names, here I just renamed it to sass2, no need to refer to them as strings.
Also your serve is no different than your default task...

Gulp error: The following tasks did not complete: default, sass

I have created a gulpfile.js file for a project I'm building. When I try to run it, I get this error.
[18:29:03] Using gulpfile ~\Documents\codeprojects\antenna\gulpfile.js
[18:29:03] Starting 'default'...
[18:29:03] Starting 'sass'...
[18:29:03] The following tasks did not complete: default, sass
[18:29:03] Did you forget to signal async completion?
Here is my gulpfile.js code
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('public/stylesheets/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
gulp.task('watch', function() {
gulp.watch('public/stylesheets/*.scss', ['sass']);
});
gulp.task('default', gulp.series('sass', 'watch'));
gulp.task('sass', function() {
return gulp.src('public/stylesheets/style.scss') // return added here
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
// the return above will suffice to "signal async completion"
gulp.task('watch', function() {
// gulp.watch('public/stylesheets/*.scss', ['sass']); // old gulp v3 synatx
gulp.watch('public/stylesheets/*.scss', gulp.series('sass')); // v4 syntax
});
Also, you will want to switch to the plugin gulp-dart-sass instead of gulp-sass. It supports more recent features like #use for example.

AssertionError [ERR_ASSERTION]: Task function must be specified GULP (node js , keystone js )

I dont know why i am receiving this error AssertionError [ERR_ASSERTION]: Task function must be specified GULP (node js , keystone js ). What causes this error ? anyone can help ?. I am using keystone app and sass compilation?. gulp file that will restart keystonejs app and compile sass. Is this regarding on the gulp version my goal version in my package.json is "gulp": "^4.0.2",.
My Gulp file
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jshintReporter = require('jshint-stylish');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var shell = require('gulp-shell')
var bs = require('browser-sync').create();
var paths = {
'src':['./models/**/*.js','./routes/**/*.js', 'keystone.js', 'package.json'],
'style': {
all: './public/styles/**/*.scss',
output: './public/styles/'
}
};
// gulp lint
gulp.task('lint', function(){
gulp.src(paths.src)
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter));
});
// gulp watcher for lint
gulp.task('watch:lint', function () {
gulp.src(paths.src)
.pipe(watch())
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter));
});
gulp.task('sass', function(){
gulp.src(paths.style.all)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(paths.style.output))
.pipe(bs.stream());
});
gulp.task('watch:sass', function () {
gulp.watch(paths.style.all, ['sass']);
});
gulp.task('browser-sync', function(){
bs.init({
proxy: 'http://localhost:3000',
port: '4000'
});
});
gulp.task('runKeystone', shell.task('node keystone.js'));
gulp.task('watch', ['watch:sass', 'watch:lint']);
gulp.task('default', ['watch', 'runKeystone', 'browser-sync']);

browser sync seems not work

first time I'm using browser sync with gulp, this is my project structure:
-root
-assets
-img
-src
-css
-js
-scss
index.html
gulpfile.js
package.json
and this is the gulpfile.js:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass'), () => {
browserSync.init({
server: "./src"
});
gulp.watch("./src/scss/*.scss", ['sass']);
gulp.watch("./src/*.html").on('change', browserSync.reload({stream:true}));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve'));
I take the code by the browser sync docs here and modified a bit, but when I type 'gulp' on the console, I get this:
[22:24:59] Starting 'default'...
[22:24:59] Starting 'serve'...
[22:24:59] Starting 'sass'...
[22:24:59] Finished 'sass' after 40 ms
[22:24:59] Finished 'serve' after 43 ms
[22:24:59] Finished 'default' after
Probably I missed something, shouldn't browser sync run indefinitely?
thanks
ok now seems I solved:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', function() {
browserSync.init({
injectChanges: true,
server: "./src"
});
gulp.watch("./src/scss/*.scss", gulp.series('sass'));
gulp.watch("./src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve','sass'));

gulpfile.js - task is not in gulp file error

Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}
You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).

Categories