gulp doesn't create dist directory and files in it while executing tasks
gulp.task('css', function () {
gulp.src('./css/style.css')
.pipe(stylus({
'include css': true
}))
.pipe(rename({
suffix: '.min',
extname: '.css'
}))
.pipe(gulp.dest('./dist/css'))
.pipe(connect.reload());
});
No errors occur in the console dialog. However everything works fine on linux and mac. Please help me solve this problem.
Related
I have updated Gulp 3.9 to 4 and my gulp task is now returning an Assertion Error: Task function must be specified.
Can anyone show how I could refactor the code below to work with Gulp 4?
Thanks in advance!
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("./scss/**/*.scss", ['sass']);
gulp.watch("./js/main.js", ['javascript']);
});
gulp.task('default', gulp.series('sass', 'browser-sync', function () {
gulp.watch("./scss/**/*.scss", 'sass');
gulp.watch("./js/main.js", 'javascript');
}));
should do it. The function signature has changed (from 3 to 2 parameters) and you need to use gulp.series.
See Convert gulp watch in gulp#3.9.1 to gulp#4
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./app/scss/**/*.scss')
// 2. pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./app/css'))
// 4. stream changes to all browser
.pipe(browserSync.stream());
}
function watch() {
browserSync.init({
server: {
baseDir: './app/'
}
});
gulp.watch('./app/scss/**/*.scss', style);
gulp.watch('./app/**/*.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
Faced same issue and I found this code in this youtube video
Hope this helps.
Here are my tasks to delete, bundle and watch for changes. Everytime I bundle, it works fine (even if the file doesn't exist yet). However, with the watch task, it'll break when it deletes the file and won't rebuild. Thoughts?
gulp.task('delete', function() {
var path = 'app/public/bundle.js';
return del(path);
});
gulp.task('bundle', ['delete'], function() {
var projectFiles = glob.sync('./app/**/*.js')
return browserify({
entries: projectFiles,
extensions: ['.js']
})
.bundle()
.on('error', function(err){
gutil.log(err);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/public/'))
.pipe(notify({message: 'Browserify bundlified!'}))
});
gulp.task('watch', function(){
gulp.watch('app/assets/sass/**/*', ['css']);
gulp.watch('./app/**/*.js', ['bundle']);
})
I generated a js file with a source map using the following gulp task. The original sources get loaded in Firefox but do not get loaded in Chrome. Can anyone point out why Chrome can't find the sources which are clearly included in the generated index-[hash].js.map?
gulp.task('browserify', function () {
// set up the browserify instance on a task basis
return browserify({ debug: true })
.transform(babelify)
.require('client/web/private/js/es6/index.js', {
entry: true
})
.bundle()
.on('error', function handleError(err) {
console.error(err.toString());
this.emit('end');
})
.pipe(source('index.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.pipe(rev())
// .on('error', gutil.log)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./client/web/public/dist/js'))
});
I'm trying to get browsersync (with stream) working, but it doesn't seem to work in pipe context. The sass compiles correctly, then nothing happens. My code is as follows:
gulp.task('sass', function () {
gulp.src('../css/source/*.scss')
.on('error', function (err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "<%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(concat('build.css'))
.pipe(gulp.dest('../css/build/dev'))
.pipe(browserSync.reload({stream:true}))
.pipe(csso())
.pipe(gulp.dest('../css/build/min'));
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch('../css/source/*.scss', ['sass']);
});
In my terminal it does seem to register it though:
[BS] 1 file changed (build.css)
[BS] File changed: ../css/build/dev/build.css
The only way I can get a reload to happen is to add it to the watch task:
gulp.watch("../css/build/dev/*.css", browserSync.reload);
... but with this method I can't seem to enable the stream, as it doesn't accept a function. I have also tried browserSync.stream() as per the current docs to no avail.
Here is the browsersync task if it helps:
gulp.task('browser-sync', ['sass'], function() {
browserSync.init({
proxy: 'local.test.com',
host: '10.0.1.40'
});
});
Please help!
Remove the pipe to browserSync in task sass, and add a files key to browserSync.init():
browserSync.init({
...
files: ['../css/**/*.css'],
...
});
With the above setup you need neither gulp.watch() (that's for starting tasks based on file changes) nor a gulp task that depends on browserSync. Simply run gulp browser-sync.
Note that this watches the CSS directly to avoid a race condition between the scss changes and browserSync.
I'm getting this error when trying to run my gulp command. It worked fine last week. Any reason why I'm getting the following error now?
TypeError: Object #<Readable> has no method 'write'
This is what the JS task looks like.
// JS task
gulp.task('js', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src('./src/js/*.js')
.pipe(browserified)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Here's a link to the entire gulpfile.js: https://github.com/realph/gulp-zero/blob/master/gulpfile.js
Any help is appreciated. Thanks in advance!
What version of browserify do you have at the moment? Browserify changed recently to not accept inward streams, just creating some. This would be the correct, adapted code:
var source = require('vinyl-source-stream');
var buffer = require('gulp-buffer');
gulp.task('js', function () {
return browserify({entries:['./src/js/main.js']})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Update I changed the filename to a real file. Note that browserify works best if you just have one file there. If you have to create multiple bundles, please refer to this article