I'm trying to watch some files in a directory and automatically update there documentation with jsdoc. I use gulp to watch the file and run jsdoc see code below.
const gulp = require('gulp');
const watch = require('gulp-watch');
const jsdoc = require('gulp-jsdoc3');
gulp.task('doc', function(cb) {
const config = require('./jsdoc.json');
return watch(['../upload/**/*.js'], { ignoreInitial: false })
.pipe(jsdoc(config, cb));
});
When I run this task it doesn't update my jsdoc when a file is changed. Does jsdoc not work together with the watch function?
It´s not sure that the problem comes from gulp-jsdoc3. Maybe you want to split your task into two tasks.
task for the job and the
for the watcher
const gulp = require('gulp');
const watch = require('gulp-watch');
const jsdoc = require('gulp-jsdoc3');
gulp.task('jsdoc-task', function() {
console.log('task is running')
const config = require('./jsdoc.json');
return gulp.src( 'scr/files' )
.pipe(jsdoc(config)).
.pipe(gulp.dest( 'your destination path ));
});
gulp.task('watch', function() {
gulp.watch('files-to-watch', [jsdoc-task]);
});
Please note there is no return for the watcher and also the files to watch src should not be the same as the output destination files.
You can now see the consol.log and check out if the task was started.
Now it should be easier to find out whats going wrong. If it´s not working check out the error message for more details.
Related
I am learning to use gulp and have followed through a tutorial. I am trying to concat js files my code is:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task["concatScripts", function() {
return gulp.src(['js/jquery.js',
'js/foundation.equalizer.js', 'js/foundation.reveal.js'])
.pipe(concat("app.js"))
.pip(gulp.dest("js"));
}];
my error code is:
$ gulp concatScripts
[21:33:21] Using gulpfile ~\Documents\Treehouse notes\website-optimization\work\gulpfile.js
[21:33:21] Task 'concatScripts' is not in your gulpfile
[21:33:21] Please check the documentation for proper gulpfile formatting
Can anyone see where I am going wrong? Also it did not state to, however I linked the gulp.js file to write the code for gulp in to my html, is this correct?
Thank you in advance.
Check the documentation at gulp-concat and the code example: Instead of calling gulp.task[' you should make a function call:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('concatScripts', function() {
return gulp.src('./js/*.js') // <-- Or an array of files
.pipe(concat('app.js'))
.pipe(gulp.dest('./js/'));
});
So far I have this code, which I got from here:
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
gulp.task('default', function() {
return gulp.src('*/lib/app.js', { base: '.' })
.pipe(named())
.pipe(webpack())
.pipe(gulp.dest('.'));
});
My folder structure is like:
site1/lib/app.js
site2/lib/app.js
I want to create the output files like the following, with each file containing only their respective lib/app.js file's code (and any require()s made in them):
site1/app.js
site2/app.js
However, the code I have now just outputs to the project's root directory. I've tried several combinations, such as removing the { base: '.' }, but nothing works. If I remove the named() and webpack() pipes, though, then the current code actually outputs to the correct directory. So, in the process, it seems like perhaps Webpack loses the originating directory information?
Also, it possible to get a solution that also works with Webpack's "watch: true" option, so that compiling modified files is quick, rather than using Gulp to always iterate through every single file on every file change?
I assume you want to create a app.js for each site that packs only the code for that site (and not the others).
In that case you can use gulp-foreach to effectively iterate over all your app.js files and send each one down its own stream. Then you can use the node.js built-in path module to figure out where the parent directory for each app.js file is and write it there with gulp.dest().
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var foreach = require('gulp-foreach');
var path = require('path');
gulp.task('default', function() {
return gulp.src('*/lib/app.js')
.pipe(foreach(function(stream, file) {
var parentDir = path.dirname(path.dirname(file.path));
return stream
.pipe(named())
.pipe(webpack())
.pipe(gulp.dest(parentDir));
}));
});
If you want to use webpack({watch:true}) you'll have to use a different approach. The following uses glob to iterate over all the app.js files. Each app.js file is again send down its own stream, however this time all the streams are merged before being returned.
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var path = require('path');
var merge = require('merge-stream');
var glob = require('glob');
gulp.task('default', function() {
return merge.apply(null, glob.sync('*/lib/app.js').map(function(file) {
var parentDir = path.dirname(path.dirname(file));
return gulp.src(file)
.pipe(named())
.pipe(webpack({watch:true}))
.pipe(gulp.dest(parentDir));
}));
});
Following angular 2 quick start guide, guys there use typescript compiler and tsconfig.json file, to work with it. I was looking up ways to use gulp for this and indeed there seem to be ways to achieve this, however I'm a bit confused to correct implementation with angular 2.
essentially gulp-typescript and gulp-tslint seem to be two plugins to achieve this and somehow tsconfig.json file is also in play here, although I don't grasp why.
Could anyone provide example for implementation that will achieve above? I believe all development .ts files should be within src folder and javascript needs to be pumped over to build folder. (assume for now that both folders have setup from angular 2 quick start)
I've setup gulp to work from gulpfile.js/ folder. In this folder are index.js, config.js and tasks/ folder, and in tasks/typescript.js is task that compiles TypeScript (tasks folder has 15 other tasks). So instead of one huge gulpfile.js I have manageable chunks that each do just one thing...
gulpfile.js/index.js
var gulp = require('gulp');
var config = require('./config.js');
var plugins = require('gulp-load-plugins')();
plugins.brsync = require('browser-sync').create();
plugins.builder = require('systemjs-builder');
function run(name) {
return require('./tasks/' + name)(gulp, plugins, config);
}
// ...other tasks, in alphabetical order! (:
gulp.task('typescript', run('typescript'));
gulpfile.js/config.js
var distDir = 'dist';
var staticDir = isGAE() ? '/static' : '';
module.exports = {
SRC: {
TYPESCRIPT: 'src/scripts/**/*.ts',
},
DST: {
MAPS: './maps',
SCRIPTS: distDir + staticDir + '/scripts',
},
};
gulpfile.js/tasks/typescript.js
module.exports = function (gulp, plugins, CONFIG) {
return function typescript() {
var tsProject = plugins.typescript.createProject('tsconfig.json');
var tsReporter = plugins.typescript.reporter.fullReporter();
var stream = gulp
.src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })
.pipe(plugins.sourcemaps.init())
.pipe(plugins.typescript(tsProject, undefined, tsReporter))
.pipe(plugins.sourcemaps.write(CONFIG.DST.MAPS,
{sourceMappingURLPrefix: '/scripts'}))
.pipe(gulp.dest(CONFIG.DST.SCRIPTS))
.on('error', plugins.util.log);
return stream;
};
};
gulpfile.js/tasks/watch.js
module.exports = function (gulp, plugins, CONFIG) {
return function watch() {
plugins.brsync.init(CONFIG.BRSYNC);
gulp.watch(CONFIG.SRC.TEST, () => queue_tasks(['karma']));
gulp.watch(CONFIG.SRC.TYPESCRIPT, () => queue_tasks(['typescript'], brsync_reload));
};
};
I had an issue with gulp watch: if you're watching files, work on more then one file and save them all it will run a task multiple times, which can be annoying. Check the link for implementation of queue_tasks() function...
Also note that I'm using Gulp 4:
gulp.src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })
I've added in src() option since to cache files, and pass only changed files down the pipe. I implemented this just 2 days ago and didn't test it with typescript files (works in other places), so if there are issues just remove it...
I need to run some gulp task on two different folder only.
Example of my project folder structure:
- Project
- componentA
- componentB
- componentC
- componentD
I need to perform tasks in componentA and componentB and not in C/D.
At the moment I am using the following script.
Could you please tell me how to add the task for B?
Do you know any alternative/better approach?
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
// JS hint task
gulp.task('jshint', function () {
gulp.src('./componentA/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
The below uses a match to exclude C and D directly
(note I'm using concat for testing)
var gulp = require('gulp');
var concat = require('gulp-concat');
var files = './component!(C|D)/*.txt';
gulp.task('test', function(){
gulp.src(files)
.pipe(concat('all.txt'))
.pipe(gulp.dest('./'));
});
Which for you would be
'./component!(C|D)/**/*.js'
I was able to solve this issue using the following code.
Any better way or alternative approaches are welcome.
// include plug-ins
var jshint = require('gulp-jshint');
var folders = [
'./componentA/**/*.js',
'./componentB/**/*.js'
];
// JS hint task
gulp.task('jshint', function () {
gulp.src(folders)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
\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