I need to minify automatically all files when some change occurs in my js or less files.
I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.
For minify this files i just execute this task and everything forks fine:
gulp.task('minify', ['styles', 'services','controllers']);
Instead run this task manually i want to do automatic in development mode. How i can do this?
What you need to do is run your project with nodemon
nodemon = require('gulp-nodemon');
Nodemon runs your code and automatically restart when your code changes.
So, for automatic minification use this Gulp Task:
gulp.task('watch', function() {
gulp.watch(pathLess, ['styles']);
gulp.watch(pathJs.services, ['services']);
gulp.watch(pathJs.controllers, ['controllers']);
});
And then setup nodemon for run your project
gulp.task('nodemon', function () {
nodemon({ script: 'server.js'})
.on('start', ['watch'], function () {
console.log('start!');
})
.on('change', ['watch'], function () {
console.log('change!');
})
.on('restart', function () {
console.log('restarted!');
});
})
Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.
I hope it helps
Related
Hi everyone I hope you having a great day, I'm trying to find a way on how do I make a min file in the same path or gulp.dest() on gulp(gulp-uglify and gulp-rename). In my code below when I run my gulp it keeps on creating *.min.js , *.min.min.js , *.min.min.min.js so on and so forth unless I stop the terminal. How do I make my gulp create only one *.min.js at the same time it uglify's. I hope everyone can help me with this one. Thank You.
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(rename( {suffix: '.min'} ))
.pipe(gulp.dest('./src/js/'))
.pipe(browserSync.stream());
});
gulp.task('browserSync', function(){
browserSync.init({
server : {
baseDir : './'
}
});
gulp.watch('./src/js/**.js', gulp.series('scripts'));
});
gulp.task('default', gulp.series('scripts', 'browserSync'));
This is happening because your scripts task is outputting the files to the same directory as you are watching:
.pipe(gulp.dest('./src/js/'))
and
gulp.watch('./src/js/**.js', gulp.series('scripts'));
So every time scripts runs and saves to that directory it triggers your watch again which fires scripts, etc., etc.
So either save your .min's to a directory you are not watching or don't watch .min files.
BTW, change to gulp.watch('./src/js/*.js', gulp.series('scripts')); // removed one asterisk
gulp.watch(['./src/js/*.js', '!./src/js/*.min.js'], gulp.series('scripts')); //
might work - untested though.
I am trying to write a gulpfile as follows :
var gulp = require('gulp');
// other dependencies go here ....
// source of files
var inputs = require('./asset_source.js');
// a simple task
gulp.task('css', function () {
gulp.src(inputs.css)
.pipe(debug())
.pipe(plumber())
.pipe(maps.init())
.pipe(concatCss('libs.css'))
.pipe(maps.write('../srcmaps'))
.pipe(plumber.stop())
.pipe(gulp.dest('assets/css'));
});
// the watcher
gulp.task('watch', function () {
gulp.watch('./asset_source.js', ['css']);
});
// default task
gulp.task('default', ['browser-sync', 'watch']);
And the source of assets (asset_source.js) file is something like this :
module.exports = {
css: [
'path/to/a/file.css',
'path/to/another/file.css',
.......
.......
],
js: [
'path/to/a/file.js',
'path/to/another/file.js',
.......
.......
]
};
Now I run the app with by just typing gulp in the console and it starts in a browser thanks to browsersync. I have all the css,scss,js assets listed in the asset_source.js file which is in the same directory as the gulpfile.js. What I want to achieve is if I append or remove a value to/from either of the arrays in asset_source.js, the concerned task should run while the gulp is already running. In this case css should be running on any change to asset_source.js with its updated content.
But instead it doesnt do so. Even if there is a change in the asset_source file, gulp uses the initial content and runs the task. However if run gulp css in a separate terminal, it works.
Please help me where I am going wrong or if it is even possible. Thanks.
I have a problem running gulp watch on huge number of files (>=40000). I have latest gulp (3.9.1), node (6.4.0), npm (3.10.3).
To replicate error you have to create sample files
mkdir test && cd test && for i in {1..40000}; do echo "tt" >> test$i; done
gulpfile.js
var gulp = require('gulp')
var src = './**/*';
// works normally
//var src = './*';
gulp.task('watch', function () {
gulp.watch(src, {read: false}).on('change', function(file) {
console.log('watch running');
});
});
gulp.task('default', ['watch']);
Running watch on directory with that many files just fails without any error. Is there any way to make it work?
I'm using BrowserSync in server mode (using its built-in static server) with GulpJS on a local project, and everything seems to be working correctly except that the BrowserSync server is very slow to startup. BrowserSync itself seems to initialize right away when I run Gulp, but it takes about 4 to 5 minutes (and occasionally more) for the server to start and for it to return the access URLs. During this period, everything continues to run and BrowserSync responds to reload() calls and such, but access is not available via the usual URLs (in this case, localhost:3000 and localhost:3001). Once the access URLs are returned, the server has seemingly started and BrowserSync's page refreshes work fine and are actually very speedy.
I have tried several different configurations of my gulpfile.js, trying different ways to initialize BrowserSync, different approaches to calling the stream() and reload() methods (including trying BrowserSync's basic Gulp/SASS "recipe"), and different port numbers, but all configurations had the same problem. I even tried disabling my firewall and AV software (Avast), but nothing.
I'm running Windows 8.1, if that's relevant. BrowserSync is freshly installed locally to the project via NPM, and fresh local installs to other directories have the same problem. NPM, Ruby, Gulp, and all modules seem to be up-to-date. For what it's worth, all of my other experience with Ruby, Gulp, and Node.js have been very smooth and problem-free.
I can't find any other posts mentioning this problem and am beginning to think this is normal behavior. Is this normal, and, if not, does anyone have any ideas of things to try? This delay is not the end of the world since the BrowserSync server does always start (eventually), but it's still a kink in my workflow that I'd rather fix than just deal with.
Finally, here is my gulpfile.js:
/* File: gulpfile.js */
var gulp = require('gulp'),
gutil = require('gulp-util');
jshint = require('gulp-jshint');
sass = require('gulp-sass');
concat = require('gulp-concat');
uglify = require('gulp-uglify');
sourcemaps = require('gulp-sourcemaps');
imagemin = require('gulp-imagemin');
browserSync = require('browser-sync').create();
gulp.task('default', ['watch'], browserSync.reload);
// JSHint
gulp.task('jshint', function() {
return gulp.src('src/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Build JS
gulp.task('build-js', function() {
return gulp.src('src/js/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/www/js/core'));
});
// Build CSS
gulp.task('build-css', function() {
return gulp.src('src/sass/**/*.{sass,scss}')
.pipe(sourcemaps.init())
.pipe(sass()).on('error', handleError)
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('public/www/css/core'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
// ImageMin
gulp.task('imagemin', function () {
return gulp.src('src/img/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('public/www/img'));
});
// Handle errors
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
// Watch function
gulp.task('watch', function() {
browserSync.init({
server: "./public/www",
//port: 3002
});
gulp.watch('src/js/**/*.js', ['jshint']);
gulp.watch('src/sass/**/*.{sass,scss}', ['build-css']);
gulp.watch('src/js/**/*.js', ['build-js']);
gulp.watch('src/img/*', ['imagemin']);
gulp.watch("public/www/css/**/*.css").on('change', browserSync.reload);
})
The BrowserSync Twitter account suggested that I set the "online" option to true, and...it seems to have worked!
I set it in BrowserSync's init like so:
browserSync.init({
server: "./public/www",
online: true
});
...and the delay is gone!
Going by the BrowserSync docs ( http://www.browsersync.io/docs/options/#option-online ), it seems that setting the online option to true skips the online check. So, I guess that check was somehow what was causing the delay? That seems odd to me, but it's working better now.
In my case I had this code in gulpfile which delay startup about 50 seconds
gulp.watch('./**/*.{js,html}').on('change', browserSync.reload);
and the problem was in the glob string. It inspects even node_modules folder. And I did some changes
gulp.watch(['./scripts/**/*.{js,html}', './index.html'])
.on('change', browserSync.reload);
I think that it is performance feature, that we should more exactly specify glob.
\Hey guys I'm totally stuck with this one.
Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load the latest changes.
The problem I'm having is I can't for the life of me figure out how to add a callback to watch so that the call to restart pm2 only happens after babel has done its magic transforming the files.
var gulp = require("gulp");
var babel = require("gulp-babel");
var pm2 = require("pm2");
var watch = require("gulp-watch");
var plumber = require("gulp-plumber");
var SRC = "src/**/*js";
var DIST = "dist/";
function restartPM2() {
//restart pm2 code in here
}
gulp.task("default", function () {
return gulp.src(SRC)
.pipe(watch(SRC))
.pipe(plumber())
.pipe(babel())
.pipe(plumber.stop())
.pipe(gulp.dest(DIST));
// somewhere in here need a call back after babel has transformed
// the code and saved it to dist/ to then call restartPM2
});
Any help would be greatly appreciated!
First, you're not watching the right way. Then, you should keep things separated. That's how I'd do:
var paths = {
babel: './somedir'
}
//basic babel task
gulp.task('babel', function() {
return gulp.src(paths.babel)
.pipe(babel())
.pipe(gulp.dest('./'))
})
//see below for some links about programmatic pm2
gulp.task('pm2', function(cb) {
pm2.connect(function() {
pm2.restart('echo', function() {
return cb()
})
})
})
gulp.task('default', ['babel']) //I don't restart pm2 with the default task but you could
//the watch task
gulp.task('watch', function() {
//their could be more watchers here ofc
gulp.watch(paths.babel, ['babel', 'pm2'])
})
If you launch gulp watch, it'll watch the paths.babel and, on change, execute both tasks (babel, pm2).
If you only execute gulp (or gulp babel in this example), it'll launch the appropriate task. You'd be able to launch gulp pm2 too.
Ressources:
pm2 programmatic doc
gulp doc