I'm using gulp concat and browserync. When I run gulp, it starts browserync and concatenates and reloads all js files found in modules. The problem is that it only does the concatenation of js files once, so I need to stop running gulp and run it again so I can see any changes reflected to js files. I only see the gulp notify task after stoping and restarting gulp too. How do I setup gulp so that always bundles and compiles the js and then runs browersync?
Here is my gulpfile
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
// default
gulp.task('default', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/modules/**/*.js', browserSync.reload);
});
gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('app/build/js'))
.pipe(notify({ message: 'Scripts in modules have been bundled!' }));
});
//start browsersync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
Try this:
// watch
gulp.task('watch', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/modules/**/*.js', ['scripts']);
});
gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('app/build/js'))
.pipe(notify({ message: 'Scripts in modules have been bundled!' }))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('default', ['watch', 'scripts']);
I'm not sure but could you try to put
gulp.watch('app/modules/**/*.js', ['scripts']);
under task "default"
As I understand your gulp didn't watch your files and run the script
P.S. I'm not expert in gulp if it doesn't work out I'm sorry.
Related
I have this gulp code that works fine with browser-sync and the gulp sass compiler, I've tried to insert a browserify task but seems doesn't work, it works if I type on the command line:
browserify src/js/main.js -o src/js/bundle/bundle.js
this is my project structure:
|-project
|--/src
|---/css
|----style.css
|---/js
|----main.js
|----/bundle
|-----bundle.js
|---/scss
|----_bootstrap.scss
|----style.scss
|---/assets
|----/img
|---index.html
|--gulpfile.js
|--package.json
and this is my gulp file:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const browserify = require('browserify');
gulp.task('sass', () => {
return gulp.src("./src/scss/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
gulp.task('js',()=>{
return gulp.src('./src/js/main.js')
.pipe(browserify())
.pipe(gulp.dest('./src/js/bundle'))
});
gulp.task('serve', ()=> {
browserSync.init({
injectChanges: true,
server: "./src"
});
gulp.watch("./src/scss/*.scss", gulp.series('sass'));
gulp.watch("./src/js/*.js", gulp.series('js'));
gulp.watch("./src/*.html").on('change', browserSync.reload);
});
gulp.task('default', gulp.series('serve','sass','js'));
I have recently added the 'js' task but when I type gulp in the command line everything works fine except for the browserify task.
as a test the main.js file looks like this:
const jquery = require('../../node_modules/jquery')
console.log(jquery)
and I still get the error 'required is not defined'. there is something i missed out. Many thanks
ok, finally works (seems...) it was not a problem with browserify but with the new version of gulp, instead of:
gulp.task('default', gulp.series('serve','sass','js'));
I have had to do:
gulp.task('default', gulp.parallel('serve','sass','js'));
before the sass and js task didn't start, now with parallel function seems works
I have read all the answers on the internet that I could find on this subject in last two days. Now I am just searching for gulp plugin that can merge broken js files into one big js file and not to throw error in terminal caused by unclosed function in one js file.
Explanation:
I have created js app built with modules.
At the very beginning I didn't knew that this will become big app and therefore I have wrote js code in one file.
Now I have come to an idea to split app.js file like this:
app-start.js (Named IIFE function open)
module1.js
module2.js
etc.
app-end.js (Named IIFE function closed)
I am using gulp as task runner and gulp-concat which works perfectly.
Problem is that when I try to break IIFE function in two files (app-start.js, app-end.js) then gulp doesn't wanna build bundle.js file.
I get error in terminal that I should repair my js code in
app-start.js
So, my question is,
do You maybe know about gulp plugin that will merge multiple js files in given order and never mind the js code errors in those files?
This is my gulp.js code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
sourceMap = require('gulp-sourcemaps'),
babel = require('gulp-babel');
gulp.task('sass', function() {
gulp.src('resources/sass/config-normalize.sass')
//.pipe(sourceMap.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 30 versions']}))
.pipe(sass({outputStyle: 'expanded'})) //expanded - compressed
//.pipe(sourceMap.write('.'))
.pipe(gulp.dest('configurator/css'));
gulp.src('resources/sass/config-style.sass')
//.pipe(sourceMap.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 30 versions']}))
.pipe(sass({outputStyle: 'expanded'})) //expanded - compressed
//.pipe(sourceMap.write('.'))
.pipe(gulp.dest('configurator/css'))
.pipe(browserSync.stream());
});
gulp.task('scripts', function() {
gulp.src([
//'resources/js/vendor/jquery.js',
//'resources/js/vendor/library/neki_file.js',
'resources/js/001-app-start.js',
'resources/js/002-ajax.js',
'resources/js/003-global-variables.js',
'resources/js/050-main.js',
'resources/js/100-my-modules.js',
'resources/js/app-end.js'
])
//.pipe(plumber())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('all.js'))
//.pipe(uglify())
.pipe(gulp.dest('configurator/js'))
.pipe(browserSync.stream());
});
gulp.task('php', function() {
gulp.src('./**/*.php')
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost" //Upisi path do projekta na local hostu bez http://
});
});
gulp.task('images', function() {
return gulp.src('assets/images-uncompressed/**/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images'));
});
gulp.task('watch', function() {
gulp.watch('./**/*.php', ['php']);
gulp.watch('resources/sass/**', ['sass']);
gulp.watch('resources/js/**', ['scripts']);
//gulp.watch('resources/images-uncompressed/*', ['images']);
});
gulp.task('default', ['sass', 'scripts', 'php', 'browser-sync', 'watch']);
The problem is with the order you run your Gulp tasks:
babel parses and transforms JavaScript so it needs well-formed input.
concat doesn't need to understand JavaScript; it just combines text files. It will happily deal with your broken-up files.
If you move concat before babel, Babel can work on a single, well-formed blob of JavaScript built up from your split files.
I am using gulp browser sync in the web app I have developed using Microsoft Visual Studio. The issue has occured when I started using browser sync to reload the page whenever a file has been modified. My app is running on my default localhost. The development build succeeds but it can't open the site. The following is my gulp code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
gulp.task('serve', [], function() {
// .init starts the server
bs.init({
server: "./",
port: 64510
});
});
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(bs.reload({ stream: true }));
});
gulp.task('watch', ['browser-sync'], function() {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
gulp.task('build', ['clean-code', 'serve', 'browser-sync'], function() {});
Thanks in advance.
You call a 'browser-sync' task twice in your provided code but there is no actual 'browser-sync' task. For example, your 'build' has such a call:
gulp.task('build', ['clean-code', 'serve', 'browser-sync'], function() {});
and so does the 'watch' task:
gulp.task('watch', ['browser-sync'], function() {
Get rid of those two 'browser-sync' references and it will work.
i new with gulp and i have a problem that i can't know why.
I want to minify my js and css, with the code below, works, but only works if i call minify-js and minify-css into default.
Gulp watch not work and i don't know why.
If a delete the .min with watch running, he creates the .min file, but came empty. All problems i have found came with solutions that my code already have.
var css = [
'./css/estilo.css'
];
var js = [
'./js/app.js'
];
var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var watch = require('gulp-watch');
var cssmin = require("gulp-cssmin");
var stripCssComments = require('gulp-strip-css-comments');
gulp.task('minify-css', function(){
gulp.src(css)
.pipe(stripCssComments({all: true}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./css/min/'));
});
gulp.task('minify-js', function () {
gulp.src(js)
.pipe(jsmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./js/min/'));
});
gulp.task('default', function() {
gulp.start('watch');
});
gulp.task('watch', function() {
gulp.watch(js, ['minify-js']);
gulp.watch(css, ['minify-css']);
});
Change
gulp.task('default', function() {
gulp.start('watch');
});
to:
gulp.task('default', ['watch']);
This will set the default task's dependency as watch, running watch when default is called.
Also, instead of running gulp, you can run gulp watch to start watching your files. If you make a change to ./css/estilo.css or ./js/app.js, gulp will change it automatically.
Make sure safe write is turned off in your editor (if you use JetBrains this guide should work), and the /css and /min directories have been created.
I'm getting the same problem as this guy.
My terminal looks like:
$ gulp watch
[23:59:03] Using gulpfile gulpfile.js
[23:59:03] Starting 'watch'...
[23:59:03] Finished 'watch' after 8.68 ms
http://jsbin.com/poxoke/1/edit?js
Why can't I get it to watch for file changes? Why does it end so quickly?
Thanks!
you could try adding gulp-util
var util= require('gulp-util');
and then inside your sass task add the line to report any error, if this is one, to console output.
gulp.task('sass', function () {
return gulp.src('assets/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ['sass'].concat(bourbon),
outputStyle: 'compressed'
}))
.on('error', util.log)
.pipe(sourcemaps.write())
.pipe(gulp.dest('assets/css'));
});
If gulp-sass throws an error this can get "consumed" by the pipe but still causes the whole stream to terminate. So if you add the line to explicitly catch them and then log them out you can see if this is in fact the case.
Your watch task is dependant on the 'sass' task and if it fails your task ends.
gulp.task('watch', function(){
gulp.watch('assets/scss/*.scss', ['sass']);
});
My current rule for this is:
gulp.task('sass', function () {
var src = path.join('src', 'scss', '*.scss');
var dst = path.join('public', 'css');
var config = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: false
};
return gulp.src(src)
.pipe(sourcemaps.init())
.pipe(sass(config)).on('error', util.log)
.pipe(concat('style.css')).on('error', util.log)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
And that all works fine
My output is this:
[05:49:27] Using gulpfile F:\Projects\Upload\gulpfile.js
[05:49:27] Starting 'watch'...
[05:49:29] Finished 'watch' after 1.98 s
but Gulp does not return to the command line, the cursor still keeps flashing away and when I update SASS files the code runs again and the updates are made to the CSS