I am attempting to concat a few javascript files as part of my gulp build. I am following the "documentation" as much as possible, but there aren't many answers there. Here are the commands I am using.
gulp.task('concatMe', function ()
{
console.log('I am in the concat function.');
return gulp.src(['/app/core/threejs/*.js'])
.pipe(concat('new.js'))
.pipe(gulp.dest('./dist/'));
});
I would think that this takes all of the javascript files in the folder targeted and concatenates them in the new.js file at the desired directory.
While the console log works, nothing is actually done.
How do I know if it found the files I want?
How should the base URL be specified?
How should the destination URL be specified?
Does the destination file and folder need to already exist or will the code create it?
Thanks
In your gulp file, have you included the below line?
var plugin = require("gulp-load-plugins")();
Then you need to modify your code to:
return gulp.src(['/app/core/threejs/*.js'])
.pipe(plugin.concat('new.js'))
.pipe(gulp.dest('./dist/'));
Hope this helps
Related
I'm working on a Typescript project, and I am trying to implement Gulp.
In my src/ folder, I have files with different extensions.
I've configured Gulp to transpile every *.ts file to Javascript using Babel, and to output the type-definition files using the Typescript compiler.
I would like all other files to be copied to the dist/ folder.
const {
dest,
src
} = require("gulp");
function cp() {
return src("src/**/*.*", "!(src/**/*.ts)")
.pipe(dest("./dist"));
};
exports.cp = cp;
I would like the cp function to copy every file except those with a .ts extension to the dist/ folder.
The above code works if I define the extensions that I want to copy and avoid using the wildcard extension.
I've found many examples online, but they are usually not using a wildcard extension. I'm not sure if the problem comes from my negation or from the usage of a wildcard extension. Is there any way to do this?
Many thanks!
Try
"!src/**/*.ts"
Remove the enclosing parentheses that you had "!(src/**/*.ts)".
Found it!
The solution was written black on white in the official documentation of the src() method. Here is the fix:
const {
dest,
src
} = require("gulp");
function cp() {
return src(["src/**/*.*", "!src/**/*.ts"])
.pipe(dest("./dist"));
};
exports.cp = cp;
I want to delete any files named .DS_Store anywhere in a directory Gulp helps to build. However, Gulp does not pass all the files through it's own pipe, so I don't think I can do clever things with vinyl here. Rather, most of the files are generated via a static site generator that Gulp calls with child_process.
The problem is, this static site generator does not have a parameter to skip these sorts of files when it encounters them in source directories; it will just blindly carry them over. I don't want these files, so I'd like to have Gulp remove them anywhere they're found.
I tried e.g. del(['output/**/.DS_Store'], cb);, but that didn't work. Any ideas?
Update: After discovering I need something fancier than del, I tried to use glob to solve this, but I must be doing it wrongly:
const glob = require('glob');
const del = require('del');
gulp.task('build', function(cb) {
exec('pelican', function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
glob('output/**/.DS_Store', function(err, files) {
files.forEach( function(file) {
del([file]);
});
});
});
Update 2: No files are deleted as a result of the glob, however, I do note that if I insert console.log(file);, the expected files are output. So perhaps I'm on the right track, but doing something wrong with del...
Turns out I was causing my own problem by combining the exec block with the glob statement. It worked once I made these separate tasks and had the task build call pelican for the exec block and rmkjunk for the glob statement.
It's worth noting this created a new problem of needing sequential vs. parallel tasks to be run, which this SO answer addresses. Hope this helps some future confused person.
I'm new to gulp and I tried to follow the documentation in https://www.npmjs.com/package/gulp-newer to understand how it works. However its not working as expected for the below task. I think I'm missing something obvious.
Here's the folder structure,
temp
file1.js
file2.js
new
file1.js
file3.js
change
<empty initially>
I want to compare temp folder with new folder and if there are any new files in new folder(which was not present in temp earlier) then move those files to change folder. This is just me trying to understand how gulp-newer works. Am I doing it right?
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(gulp.dest('change'))
});
However when I run this task it just copy all the files in temp folder to change folder. So after task run change folder has file1.js and file2.js. I'm expecting just file3.js to be present in change(since that's a new file). Correct me if my understanding with the approach is incorrect.
From gulp-newer:
Using newer with many:1 source:dest mappings Plugins like gulp-concat
take many source files and generate a single destination file. In this
case, the newer stream will pass through all source files if any one
of them is newer than the destination file. The newer plugin is
configured with the destination file path.
and the sample code:
var gulp = require('gulp');
var newer = require('gulp-newer');
var concat = require('gulp-concat');
// Concatenate all if any are newer
gulp.task('concat', function() {
// Add the newer pipe to pass through all sources if any are newer
return gulp.src('lib/*.js')
.pipe(newer('dist/all.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});
it seems that you need to pass in all the files already concatenated to newer. In your case:
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(concat('*.js'))
.pipe(gulp.dest('change'))
});
Also, since newer checks the files modified date make sure that the files are actually newer. I know it's obvious, but I'm usually stuck on "obvious" stuff.
May I also suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.
This will allow 1:1 or many to 1 compares.
newy(function(projectDir, srcFile, absSrcFile) {
// do whatever you want to here.
// construct your absolute path, change filename suffix, etc.
// then return /foo/bar/filename.suffix as the file to compare against
}
I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});
I just started playing with gulp, and it's very fast and easy to use but it seems to have a critical flaw: what do you do when a task needs to output more than one type of file?
For example, gulp-less says it doesn't even support the sourceMapFilename option. I don't want my source map embedded in my CSS file. Am I hooped? Should I just go back to using Grunt, or is there a way to deal with this?
This task will take multiple files, do stuff to them, and output them along with source maps.
It will include the source code within the maps files by default, so you don't have to distribute the source code files too. This can be turned off by setting the includeContent option to false. See the gulp-sourcemaps NPM page for more source map options.
gulpfile.js:
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
gulp.task("test-multiple", function() {
return gulp.src("src/*.scss")
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer())
.pipe(plugins.sourcemaps.write("./"))
.pipe(gulp.dest("result"));
});
package.json
"gulp": "~3.8.6",
"gulp-load-plugins": "~0.5.3",
"gulp-sass": "~0.7.2",
"gulp-autoprefixer": "~0.0.8",
"gulp-sourcemaps": "~1.1.0"
The src directory:
first.scss
second.scss
The result directory after running the test-multiple task:
first.css
first.css.map // includes first.scss
second.css
second.css.map // includes second.scss
Gulp supports multiple output files fine. Please read the docs.
Example:
gulp.task('scripts', function () {
return gulp.src('app/*js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
This will read in a bunch of JS files, minify them and output them to the dist folder.
As for the gulp-less issue. You could comment on the relevant ticket.
In the docs it shows you how to have multiple output files:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())`
.pipe(gulp.dest('./build/minified_templates'));