I was following the answer (the one chosen by op) here to change directory in my gulpfile.js. To test whether the directory was changed, I added another task that prints the current directory. When run, both tasks are executed without any errors. However, console.log prints the address
of the parent directory instead of the directory that was navigated into in the previous task.
Here's how I setup my directory, gulpfile.js and package.json.
directory tree
-- auth
---- gulpfile.js
---- package.json
---- other js scripts
---- <dest_folder>
gulpfile.js
/// TASKS
gulp.task('directory-changer', changeDirectory);
gulp.task('directory-printer', printCD);
gulp.task('default', gulp.series('directory-changer', 'directory-printer'));
/// TASKS
function changeDirectory(done) {
process.chdir(path.resolve(__dirname, 'dest'));
gulp.src()
done();
}
function printCD(done) {
console.log(__dirname);
done();
}
pacakge.json
{ // other properties
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"run-gulp": "node ./node_modules/gulp/bin/gulp.js"
},
// other fields
The output generated:
npm run run-gulp
> auth#1.0.0 run-gulp <PROJECT_PATH>/
> node ./node_modules/gulp/bin/gulp.js
[13:42:48] Using gulpfile <PROJECT_PATH>/gulpfile.js
[13:42:48] Starting 'default'...
[13:42:48] Starting 'directory-changer'...
[13:42:48] Finished 'directory-changer' after 1.14 ms
[13:42:48] Starting 'directory-printer'...
<PROJECT_PATH>/
[13:42:48] Finished 'directory-printer' after 387 μs
[13:42:48] Finished 'default' after 4.81 ms
Now my I think that it maybe because the __dirname is printing the execution path of the script rather than the changed directory. Is that the case or is there something else going on?
Related
(Pertains to Gulp 4.0/ES6)
I would like to create a task file that can be imported by main gulpfile.js and can also be run directly from the command line using gulp (in this case without even referencing the gulpfile.js file on command line). Is this possible?
I can create a gulp task file that can be run directly:
task-a.js:
const log = require('fancy-log');
function taskA(done){
// do stuff
log('Executing task A');
done();
}
exports.default = taskA;
Run from command line:
gulp -f task-a.js
[17:53:21] Using gulpfile C:\app\task-a.js
[17:53:21] Starting 'default'...
[17:53:21] Executing task A
[17:53:21] Finished 'default' after 2.73 ms
OK, looks good.
In order to import into gulpfile.js I need to modify the export in task-a.js to:
task-a.js:
// modified the exports for require()
module.exports taskA;
gulpfile.js:
const taskA = require('./task-a');
gulp.task('default', taskA);
gulp -f gulpfile.js
OK, this also works.
But is it possible to change the exports in task-a.js to allow for both import and to be run from command line using gulp?
One way to export the function in task-a.js as a task:
gulp.task('default', taskA);
module.exports = gulp.series('default');
This ensures that the gulpfile.js can import the function as a composed operation.
When I edit theme .yml files in my themes source folder, I get this error. This does not happen when I edit scss or template .yml files from the template folder, only in the main folder. Others that had this error use things like webpack what I don't have. The gulp task for copy_theme_files is the same as other tasks with the difference that it has no return because I didn't know how to return there with two gulp.src functions.
gulp.task('copy_theme_files', function() {
console.log('[copy_theme_files] Console Log: copy '+paths.themeSrc+' to '+paths.themeDest);
gulp.src(paths.themeSrc)
.pipe(gulp.dest(paths.themeDest));
gulp.src(paths.root + '/*.{png,ico,svg}')
.pipe(paths.themeDest);
});
Full gulpfile.js https://pastebin.com/NWt2uMwV
Error Output:
[00:37:58] Using gulpfile /var/www/themes.src/mytheme.src/gulpfile.js
[00:37:58] Starting 'watch'...
[00:38:20] Starting 'copy_theme_files'...
[copy_theme_files] Console Log: copy *.{yml,theme,php,png,jpg,gif,svg,ico},.gitkeep to build
[00:38:20] 'copy_theme_files' errored after 23 ms
[00:38:20] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (/var/www/themes.src/mytheme.src/node_modules/readable-stream/lib/_stream_readable.js:564:8)
at /var/www/themes.src/mytheme.src/gulpfile.js:122:10
at taskWrapper (/var/www/themes.src/mytheme.src/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (/var/www/themes.src/mytheme.src/node_modules/async-done/index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
[00:38:20] Starting 'copy_includes'...
[copy_includes] Console Log: copy includes/**/*.*,includes/**/.gitkeep to build/includes
[00:38:20] Finished 'copy_includes' after 7.41 ms
[00:38:20] Starting 'copy_build'...
[copy_build] Console Log: copy build/**/*.*,build/**/.gitkeep to ../../web/themes/local/mytheme
[00:38:20] Finished 'copy_build' after 60 ms
Other tasks run fine
[00:41:06] Starting 'copy_templates'...
[copy_templates] Console Log: copy templates/**/*.twig,templates/**/.gitkeep to build/templates
[00:41:08] Finished 'copy_templates' after 1.86 s
[00:41:08] Starting 'copy_build'...
[copy_build] Console Log: copy build/**/*.*,build/**/.gitkeep to ../../web/themes/local/mytheme
[00:41:09] Finished 'copy_build' after 326 ms
You have this line in your task:
.pipe(paths.themeDest);
You probably mean:
.pipe(gulp.dest(paths.themeDest));
For your other question look at merging two gulp.src streams for how to return:
var merge = require('merge-stream');
gulp.task('copy_theme_files', function() {
console.log('[copy_theme_files] Console Log: copy '+paths.themeSrc+' to '+paths.themeDest);
const themesStream = gulp.src(paths.themeSrc)
.pipe(gulp.dest(paths.themeDest));
const imagesStream = gulp.src(paths.root + '/*.{png,ico,svg}')
.pipe(paths.themeDest);
return merge(themesStream , imagesStream );
});
Hi i'm trying to run some gulp task on netlify for building Hugo web.
I wonder how to run serial gulp task on netlify,
by the way this is my gulpfile.js
var gulp = require('gulp');
var removeEmptyLines = require('gulp-remove-empty-lines');
var prettify = require('gulp-html-prettify');
var rm = require( 'gulp-rm' );
var minifyInline = require('gulp-minify-inline');
gulp.task('tojson', function () {
gulp.src('public/**/*.html')
.pipe(removeEmptyLines())
.pipe(gulp.dest('public/./'));
});
gulp.task('htmlClean', function () {
gulp.src('public/**/*.html')
.pipe(removeEmptyLines({
removeComments: true
}))
.pipe(gulp.dest('public/./'));
});
gulp.task('templates', function() {
gulp.src('public/**/*.html')
.pipe(prettify({indent_char: ' ', indent_size: 2}))
.pipe(gulp.dest('public/./'))
});
gulp.task('minify-inline', function() {
gulp.src('public/**/*.html')
.pipe(minifyInline())
.pipe(gulp.dest('public/./'))
});
where should i put the command to run all my gulps task in Netlify?
There are two places to setup your build commands in Netlify.
Admin Option
Put your commands in the online admin under the Settings section of your site and go to Build & Deploy (Deploy settings) and change the Build command:
Netlify Config file (netlify.toml) Option
Edit/add a netlify.toml file to the root of your repository and put your build commands into the context you want to target.
netlify.toml
# global context
[build]
publish = "public"
command = "gulp build"
# build a preview (optional)
[context.deploy-preview]
command = "gulp build-preview"
# build a branch with debug (optional)
[context.branch-deploy]
command = "gulp build-debug"
NOTE:
The commands can be any valid command string. Serializing gulp commands would work fine if you do not want to create a gulp sequence to run them. In example, gulp htmlClean && hugo && gulp tojson would be a valid command.
Commands in the netlify.toml will overwrite the site admin command.
You can string your tasks together like this:
add another plugin with NPM:
https://www.npmjs.com/package/run-sequence
var runSequence = require('run-sequence');
gulp.task('default', function (callback) {
runSequence(['tojson', 'htmlClean', 'templates', 'minify-inline'],
callback
)
})
Then run $ gulp
There's a section on run-sequence on this page that will help:
https://css-tricks.com/gulp-for-beginners/
I am trying to get browserSync to work with a watch task for a Polymer app. Here is my gulp file:
function source() {
return project.splitSource()
.pipe(gulpif('**/*.html', html.lint())).on('end', log('Linted HTML'))
.pipe(gulpif('**/*.html', html.minify())).on('end', log('Minified HTML'))
.pipe(gulpif('**/*.js', javascript.minify())).on('end', log('Minified Javascript'))
.pipe(gulpif('**/*.js', javascript.babelify())).on('end', log('Transpiled Javascript'))
.pipe(gulpif('**/*.{gif,jpg,svg}', images.minify())).on('end', log('Minified Images'))
.pipe(project.rejoin()); // Call rejoin when you're finished
}
function dependencies() {
return project.splitDependencies()
.pipe(project.rejoin());
}
gulp.task('default', gulp.series([
clean.build,
project.merge(source, dependencies),
project.serviceWorker
]));
gulp.task('reload', function(){
browserSync.reload();
} );
gulp.task('dev', gulp.series(
project.merge(source, dependencies)
));
gulp.task('browser-sync', function(){
return new Promise(function(resolve){
resolve( browserSync({
port: 5000,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
server: {
baseDir: ['./'],
}
})
)
});
})
gulp.task('watch', function(){
gulp.watch(['**/*.html'], gulp.series('dev','reload'));
gulp.watch(['**/*.js'], gulp.series('dev', 'reload'));
});
gulp.task('serve',
gulp.series(
'dev',
gulp.parallel('browser-sync','watch')), function(){
return gulp.src('**/*.html', {passthrough:true})
}
);
The project.splitSource is a polymer starter kit specific function that splits web components into seperate html , css, js entities so you can perform whatever tasks you need on them.
When I run 'gulp serve' , the tasks complete and my app is served.
As soon as I change the contents of a file, the watch runs the 'dev' task and attempts to run the reload task, and thats where it crashes. Here is the command line messages for this entire process :
→ gulp serve
[08:53:43] Using gulpfile ~/Documents/Projects/unicef/etools-dashboard/gulpfile.js
[08:53:43] Starting 'serve'...
[08:53:43] Starting 'dev'...
[08:53:43] Starting 'output'...
[08:55:20] Linted HTML
[08:55:20] Minified HTML
[08:55:20] Minified CSS
[08:55:20] Minified Javascript
[08:55:20] Transpiled Javascript
[08:55:20] gulp-imagemin: Minified 511 images (saved 212 kB - 3.1%)
[08:55:20] Minified Images
[08:55:29] Finished 'output' after 1.75 min
[08:55:29] Finished 'dev' after 1.75 min
[08:55:29] Starting 'browser-sync'...
[08:55:29] Starting 'watch'...
[08:55:30] Finished 'browser-sync' after 551 ms
[PSK] Access URLs:
--------------------------------------
Local: http://localhost:5000
External: http://192.168.0.102:5000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.102:3001
--------------------------------------
[PSK] Serving files from: ./
[08:56:20] Starting 'dev'...
[08:56:20] Starting 'output'...
[08:56:20] Finished 'output' after 288 ms
[08:56:20] Finished 'dev' after 290 ms
[08:56:20] Starting 'reload'...
[PSK] Reloading Browsers...
Error: write after end
at writeAfterEnd (_stream_writable.js:159:12)
at StreamAnalyzer.Writable.write (_stream_writable.js:204:5)
at PassThrough.ondata (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:546:20)
at emitOne (events.js:77:13)
at PassThrough.emit (events.js:169:7)
at readableAddChunk (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:217:18)
at PassThrough.Readable.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:176:10)
at PassThrough.Transform.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:123:32)
at afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:79:51)
at TransformState.afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:58:12)
[08:56:21] The following tasks did not complete: serve, <parallel>, watch, <series>, reload
[08:56:21] Did you forget to signal async completion?
Any idea why the reload causes this to crash? I've googled this "write after end" and seems like the stream needs to be returned or async actions need an explicit done cb, but I'm not sure how to do that with gulp 4. Any advice would be of great help.
I have my gulp tasks:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('dev/sass/files/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./production/css/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('dev/sass/files/*.scss',['styles']);
});
which work when run from the console.
I have my tasks.json:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "default",
"isBuildCommand": true,
"showOutput": "always",
"isWatching": true
}
]
}
When I run the build task via F1 and the command palette I get:
"Watching build tasks has finished"
The tasks haven't run and my CSS file hasn't been updated.
I have tried/checked:
gulpfile is called gulpfile and in the root of my project
gulp works from the console. Both tasks (default and styles) are listed via gulp --tasks -simple
both tasks can be successfully run from the console
I have reinstalled VSCode - just in case that made any difference. It didn't
Turns out that my ComSpec environment variable was set to (note the semicolon):
C:\WINDOWS\system32\cmd.exe;
To check yours, run this from the command line:
node -p process.env
You can change yours by using control panel and searching for environment variables.