I am working on my Gulp tutorial(using this site: http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx).
Here is gulpFile.js:
// include plug-ins
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var config = {
//Include all js files but exclude any min.js files
src: ['app/**/*.js', '!app/**/*.min.js']
}
//delete the output file(s)
gulp.task('clean', function () {
//del is an async function and not a gulp plugin (just standard nodejs)
//It returns a promise, so make sure you return that from this task function
// so gulp knows when the delete is complete
return del(['app/all.min.js']);
});
// Combine and minify all files from the app folder
// This tasks depends on the clean task which means gulp will ensure that the
// Clean task is completed before running the scripts task.
gulp.task('scripts', ['clean'], function () {
return gulp.src(config.src)
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('app/'));
});
gulp.task('watch', function () {
return gulp.watch(config.src, ['scripts']);
});
//Set a default tasks
gulp.task('default', ['scripts'], function () { });
Here is task runner explorer:
And here how task runner explorer looks in tutorial site above:
Any idea why I dont see subTasks in my task runner explorer?
This is the only way so far that I've been able to fix this.
After adding a task, rename your gulpfile to something else and then close Task Runner Explorer.
Change the renamed file back to gulpfile.js, then reopen Task Runner Explorer.
You should see your gulpfile tasks updated.
Related
I have simple starter app, I created gulpfile.js file with content below,
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');
// Task to minify css using package cleanCSs
gulp.task('minify-css', () => {
// Folder with files to minify
return gulp.src('src/assets/styles/*.css')
//The method pipe() allow you to chain multiple tasks together
//I execute the task to minify the files
.pipe(cleanCSS())
//I define the destination of the minified files with the method dest
.pipe(gulp.dest('src/assets/dist'));
});
//We create a 'default' task that will run when we run `gulp` in the project
gulp.task('default', function() {
// We use `gulp.watch` for Gulp to expect changes in the files to run again
gulp.watch('./src/assets/styles/*.css', function(evt) {
gulp.task('minify-css');
});
});
if I run gulp minify-css it works expected, but I need it to minify on file change
But all its do log a message in cmd windows like 'Starting ...'
I don't even know what does it mean...
package.json:
..
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0"
I think you need to add return when running task minify-css, so that system knows when previous task was completed.
gulp.task('default', function() {
// We use `gulp.watch` for Gulp to expect changes in the files to run again
gulp.watch('./src/assets/styles/*.css', function(evt) {
return gulp.task('minify-css');
});
});
I'm trying use gulp to bundle and minify my files using gulp-bundle-assets. Running the tasks on their own is fine. My problem is using gulp.watch to watch for any changes in my config file and re-bundle my scripts.
The first time the watch executes everything works correctly. On successive occasions everything runs, but the exact same files are bundled - any changes in the config are ignored.
If I run my "bundle" task while the watch is running, "bundle" will use the current configuration. While successive watches will continue to use the configuration on the first execution.
My guess would be the data for the stream retrieved by gulp.src is cached. So how do I tell it to always get the latest version?
var gulp = require('gulp');
var bundle = require('gulp-bundle-assets');
var del = require('del');
var index = 0;
gulp.task('bundle', function () {
console.log('Bundling files ' + (index++));
return gulp.src('./bundle.config.js')
.pipe(bundle())
.pipe(gulp.dest('./bundles'));
});
gulp.task('watch', function () {
gulp.watch(['./scripts/**/*.{js,css}', './bundle.config.js'], ['clean', 'bundle']);
});
gulp.task('clean', function (cb) {
console.log('Cleaning files');
del(['./bundles/**/*'], cb);
});
An alternative I tried was to use watch(...).on, and calling gulp.run, but that didn't fix the problem, either. I also tried pasting the code from the bundle task in to the on callback, but still got the same result.
The culprit isn't gulp.src(), but bundle(). The gulp-bundle-assets plugin uses require() to load your bundle.config.js. Since Node.js caches return values from require() you always get the same config object after the file is loaded for the first time.
The solution is to invalidate the require cache in your bundle task:
var gulp = require('gulp');
var bundle = require('gulp-bundle-assets');
var del = require('del');
var index = 0;
gulp.task('bundle', ['clean'], function () { // run clean task before bundle task
// invalidate require cache for ./bundle.config.js
delete require.cache[require.resolve('./bundle.config.js')];
console.log('Bundling files ' + (index++));
return gulp.src('./bundle.config.js')
.pipe(bundle())
.pipe(gulp.dest('./bundles'));
});
gulp.task('watch', function () {
gulp.watch(['./scripts/**/*.{js,css}',
'./bundle.config.js'], ['bundle']); // only run bundle task
});
gulp.task('clean', function () {
console.log('Cleaning files');
return del(['./bundles/**/*']); // return promise object
});
Unrelated to your problem, but I also fixed your clean task. The way you had it set up didn't work.
I'm using the gulp-changed-in-place package to only run certain Gulp tasks with the files that have changed (https://github.com/alexgorbatchev/gulp-changed-in-place). I'm having an issue where I only want to run my linting and code style tasks on changed files to speed up development time.
My current setup is as follows:
var gulp = require('gulp');
var changedInPlace = require('gulp-changed-in-place');
var eslint = require('gulp-eslint');
var jscs = require('gulp-jscs');
var config = {
paths: {
js: './app/**/*.js'
}
}
gulp.task('jscs', function() {
return gulp.src(config.paths.js)
.pipe(changedInPlace())
.pipe(jscs())
.pipe(jscs.reporter())
.pipe(jscs.reporter('fail'));
});
gulp.task('lint', ['jscs'], function() {
return gulp.src(config.paths.js)
.pipe(changedInPlace())
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
gulp.task('js', ['lint'], function() {
// do some stuff
});
gulp.task('watch', function() {
gulp.watch(config.paths.js, ['js']);
});
The issue is probably pretty obvious. The js task has a dependency on the lint task which itself has a dependency on the jscs task - so the jscs task runs first. It accesses changedInPlace() which causes the cache to get updated and therefore the changedInPlace() call from the lint task doesn't think anything has changed and doesn't check the files I expect.
Has anyone used this package with this issue and do you have any suggestions on what to do? Also open to other ways of accomplishing the task - only running the js task on changed files.
I am trying to install packages through bower, and once the installation is finished, I want the files to be moved from dist folder to its parent, and then delete the dist folder. But somehow, its not working properly.
var gulp = require('gulp'),
bower = require('gulp-bower'),
del = require('del'),
fs = require('fs'),
path = require('path'),
merge = require('merge-stream');
vinylPaths = require('vinyl-paths');
runSequence = require('run-sequence');
var appPath="./www";
var folders = getFolders(appPath);
/* Function to get folders present in www */
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('clean', function (){
var tasks = folders.map(function(folder) {
return gulp.src(path.join(appPath, folder))
.pipe(vinylPaths(del))
});
});
/* Gulp task to run bower install */
gulp.task('bower', ['clean'], function() {
return bower({cmd: "install"});
});
/* Gulp task to copy files from dist folder to their parent folders */
gulp.task('moveFiles', ['bower'], function (){
var tasks = folders.map(function(folder) {
console.log("FOLDER", folder);
return gulp.src(path.join(appPath, folder, '/dist/**/*'))
.pipe(gulp.dest(path.join(appPath, folder )));
});
return tasks;
});
/* Gulp task to clean the dist folder after files have been copied */
gulp.task('delete-dist-folder', ['moveFiles'], function () {
var tasks = folders.map(function(folder) {
return gulp.src(path.join(appPath, folder, '/dist'))
.pipe(vinylPaths(del))
});
return tasks;
});
gulp.task('default', ['delete-dist-folder']);
This is what I wrote till now.
After bower, the rest two tasks don't run. But if I run them individually, they work perfectly fine.
I am unable to figure out what is going wrong here. Any help would be greatly appreciated.
The problem is that you return arrays of event streams. Look at your delete-dist-folder task. You return tasks and tasks is created from calling .map on an array. So tasks is an array (of event streams).
Gulp does not know what to do with your arrays and assumes that your tasks are synchronous. There are only 3 ways to mark a task as asynchronous: 1) return an even stream; Gulp will wait for the stream to end, 2) return a promise; Gulp will wait for the promise to be resolved or rejected, or 3) declare your task callback to take a single parameter which you'll call when your task is done; Gulp will wait for the callback to be called. An array of event streams does not correspond to any of these options.
The Gulp wiki suggest using merge-stream to return more than one stream from a task. Judging by the code of merge-stream, and supposing you imported merge-stream as merge, you could do return merge.apply(undefined, tasks).
Side node: in your clean task you forgot to return a value.
I had a similar issue a while back when nesting task(requiring one task in another). So to solve this issue and run task in sequence I used run-sequence.
You seem to have installed run-sequence. Use it this way:
runSequence = require('run-sequence');
gulp.task('default', function(callback) {
runSequence('clean', 'bower', 'moveFiles', 'delete-dist-folder',
callback);
});
Hope this might help you. You can refer this for any help.
This is a temporary solution untill gulp 4.0, which will include option to configure your task run in parallel or sequentially.
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.