I'm trying to update my compile TypeScript task (I've also tried it as a separate task as well) to combine the resulting javascript into one file. Here's my code:
gulp.task('compile:ts', function () {
return gulp
.src(tscConfig.filesGlob) //filesGlob is "src/ts/**/*.ts"
.pipe(plumber({
errorHandler: function (err) {
console.error('>>> [tsc] Typescript compilation failed'.bold.green);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(tsc(tscConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(concat('all-components.js'))
.pipe(gulp.dest('public/dist'));
});
I've tried different destination folders, but I never even see the new file created, let alone used. Every example I've found shows that as the correct way and I don't get any errors so I can't tell what's wrong.
Related
I can catch errors from Browserify (as shown by other SO posts on this topic), however I need to see the specific code causing the error. Example:
Error: Parsing file /public/javascripts/lib/fake_7af951da.js:
Line 10: Spread must be the final element of an element list //<--? need details
I want to output to the console the specific code in the fake_.js file that is causing the error, or I need to be able to view the fake_.js file so that I can look at Line 10.
Here is my gulp info:
gulp.task('browserify', function() {
// Single entry point to browserify
gulp.src('./public/javascripts/lib/*.js') //lists files to require
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.on('error', function(err){
console.log(err.stack);
})
.pipe(gulp.dest('./public/javascripts/out.js'))
});
I have the following directory structure in my repos:
src
some-project
some-file.html
some-file.yml
other-project
foo.html
foo.yml
bar.html
bar.yml
stylesheet.css
dist
some-project
some-file.html
some-file.yml
other-project
foo.html
foo.yml
bar.html
bar.yml
I have a gulp task that takes the styles in any stylesheet added by an html file in the /src folder and automatically inlines them in the html (these are emails). The yml are meta-information used when sending data.
Now I want to add mustache templating to my HTML. The data for the templates is going to be in the yml files. The issue I have is that the gulp-mustache plugin takes a stream for its template input and an object in parameter for its data.
gulp.task('build', () => {
gulp.src('src/**/*.html')
.pipe(mustache(data)) // I don't have the data!
.pipe(inlineCss({
removeStyleTags: false
}))
.pipe(prefix(BASE_URL, [ { match: "img[src]", attr: "src"} ]))
.pipe(gulp.dest('dist'))
});
I have another task that can compile YML to JSON, but I was trying to avoid creating temporary files since it defeats the whole point of having gulp's virtual file streams. Besides, it doesn't solve the problem that I have two tasks and two gulp pipes, I can't pass the content of one file to the mustache function. Is there something I'm missing?
It seems like a very simple task and I've searched for hours without any progress. Isn't there a way for gulp to read files per pair?
Ok so first thing I notice is that you're not returning anything in your Gulp task, which prevents Gulp from knowing when your task finished.
Since the task itself is asynchronous and Gulp supports tasks returning a Promise that will signal completion when it resolves, you could do something like that, using node-yaml package which returns a Promise too:
const yaml = require('node-yaml')
gulp.task('build', () => {
return yaml.read('my-data.yml').then(data =>
new Promise(resolve => {
gulp.src('src/**/*.html')
.pipe(mustache(data))
// ...
.pipe(gulp.dest('dist'))
.on('end', resolve)
});
);
});
Or simply using callbacks:
gulp.task('build', callback => {
return yaml.read('my-data.yml', data => {
gulp.src('src/**/*.html')
.pipe(mustache(data))
// ...
.pipe(gulp.dest('dist'))
.on('end', callback)
});
});
So I'm having a slight problem with producing production ready scripts for my project. I'm using gulp to concatenate and minify my css and js, and while the css is working fine the gulp js function isn't generating my final file. Please refer to my code below:
gulp.task('js', function() {
return gulp.src([source + 'js/app/**/*.js'])
.pipe(concat('development.js'))
.pipe(gulp.dest(source + 'js'))
.pipe(rename({
basename: 'production',
suffix: '-min',
}))
.pipe(uglify())
.pipe(gulp.dest(source + 'js/'))
.pipe(notify({ message: 'Scripts task complete', onLast: true }));
});
If anyone has encountered a similar problem or has any tips it would be much appreciated :)
There is nothing wrong with your gulpfile. I tested it and it works perfectly.
The only thing I can guess is that your source is not set correctly. Did you forget the trailing slash '/' ?
I would suggest 2 things to figure it out. Include node path library to check where source is actually pointing to like this:
var path = require('path');
// in gulp task ...
path.resolve(path.resolve(source + 'js/app'));
Make sure it points where you think it does.
Secondly, you could use gulp-debug to establish that any files are found:
npm install gulp-debug
Then
var debug = require('gulp-debug');
// in gulp task ...
return gulp.src([source + 'js/app/**/*.js'])
.pipe(concat('development.js'))
.pipe(debug())
.pipe(gulp.dest(source + 'js'))
.pipe(debug())
// etc.
Good luck!
Based on additional infomation in the comments I realise you are generating JS files in a separate process ...
gulp is asynchronous by default. What this boils down to is that all functions try to run at the same time - if you want a specific order it must be by design. This is great because it's very fast but can be a headache to work with.
Problem
Here is what's basically happening:
// SOME TASK THAT SHOULD BE RUN FIRST
gulp.task('copy-vendor-files-to-tempfolder', function (done) {
// copy files to vendor folder
done()
})
// SOME TASKS THAT DEPEND ON FIRST TASK
gulp.task('complile-styles', function () { /* independent task */ })
gulp.task('concat-vendor-files', function () { /* concat files in vendor folder. depends on vendor files existing */ })
// GENERAL TASK WHICH STARTS OTHERS
gulp.task('ready', ['copy-vendor-files-to-tempfolder', 'compile-styles', 'concat-vendor-files])
When you try to run:
$ gulp ready
GULP TASK WILL FAIL! Folder is being created at the same time!!
NOWHERE TO COPY FILES!
Solution
There are many solutions but the following module has come in handy for me again and again:
npm install run-sequence
Then in your gulpfile.js:
var runSequence = require('run-sequence')
gulp.task('ready', function (done) {
runSequence(
'create-folders', // do this first,
[
'copy-css-files',
'copy-html-files'
], // do these AFTER but in parallel
done // callback when ready
)
})
This will guarantee the folder exists when you try to run the other functions.
In your specific case, you should make sure the task that concatenates the JS files is run after the task that copies them out of vendor.
Note: I'm leaving other answer because it contains useful help for debugging similar issues.
HTH!
gulp.task('dev', function () {
watch(['public/**', '!public/index.html'], function () {
del.sync(['web/**', '!web/.gitkeep', '!web/index.html', '!web/js/**']);
del.sync(['cordova/www/**', '!cordova/www/.gitkeep', '!cordova/www/index.html', '!cordova/www/js/**']);
gulp.src(['public/**', '!public/index.html', '!public/js/**'])
.pipe(gulp.dest('web/'))
.pipe(gulp.dest('cordova/www/'));
});
});
I'm using gulp setting up my development workflow. What I want to do is whenever any change happen in the public/, I want to wipe out everything in another two directory: web/ and cordova/www/, and write everything from public/ to web/ and cordova/www/.
I don't know what I'm doing wrong here. The dev gulp task job keeps throwing the error: EISDIR, read!
I tried to create a gulpfile.js for my personal website project. I've never done this before but with a little 'trial and error' it now works in an acceptable way.
The only thing that doesn't work even after 1000 modifications is simple copying files and folders.
var files = {
data_src : [
'./files.json',
'data/**/*.*'
],
distribution_dest : '_distribution'
};
gulp.task('copy-data', function() {
gulp.src(files.data_src, { base: './' })
.pipe(gulp.dest(files.distribution_dest))
.pipe(notify({message: 'Data copied for distribution!'}));
});
This should copy all sub-folders and files to the gulp.dest. But it copies only half of them, some folders will be ignored even if I change their names etc. (no special characters, same subfolder structure as the once that got copied correctly ...) - nothing worked. I just can't see any pattern in this.
There is no error message while running gulp. Nothing that would help me find the error.
Why are some folders or files excluded from copying?
I use base to keep the folder / sub-folder structure; tried with and without 'base' -> no effects on the copying process.
I also changed the position of the 'copy-data' task in the run-list. Actually it's the first task to run. There seems to be no change in behavior no matter if it's the first or the last one.
gulp.task('default', function() {
gulp.run('copy-data', 'custom-sass', 'framework-sass', 'custom-js', 'framework-js', 'replace-tags', 'browser-sync');
... some watches ...
});
The structure of the data folder looks like these:
./data
|-doc
|---content
|---template
|-img
|---chart
|---icon
|---logo
|---pattern
|---people
|---photo
|---symbol
|-----brandklassen
|-----brandschutzzeichen
|-----gebotszeichen
|-----gefahrensymbole
|-----rettungszeichen
|-----verbotszeichen
|-----verkehrsrechtzeichen
|-----warnzeichen
|---wallpaper
/data/doc and all subfolders are ok.
/data/img/chart to /data/img/people are also ok.
Within /data/img/photo only 14 out of 21 images are copied.
/data/img/symbol with sub-folders and /data/img/wallpaper were ignored completely.
SOLVED IT MYSELF! The problem was caused by async operating tasks. Adding a return forced gulp to complete the copying process before continuing!
gulp.task('copy-data', function() {
return gulp.src(files.data_src, { base: './' })
.pipe(gulp.dest(files.distribution_dest))
.pipe(notify({message: 'Data copied for distribution!'}))
});
Now all images will be copied!