I want gulp to run my bower and install all the files in bower.json. But it is not doing that. I am not getting any error also so I am not sure if I am doing anything wrong or not. Here is the code that I have written.
var gulp = require("gulp");
var bower = require("bower");
var util = require("util");
// console.log(util.inspect(bower, false, null));
gulp.task("bower", function(callback){
bower.commands.install().on("end", function(installed){
callback();
});
});
gulp.task("default", ["bower"]);
Thanks in advance.
You are requiring the main bower package and using it programatically. With gulp, it would be easier to use the gulp-bower plugin instead - https://github.com/zont/gulp-bower#usage
Related
I'm trying to move file from a directory to an other with gulp, but when i run my gulpfile, nothing happens, and i have this output
[19:25:22] Using gulpfile ~/Dev/Anikey/gulpfile.js
[19:25:22] Starting 'default'...
[19:25:22] Finished 'default' after 19 ms
My gulpfile.js :
const {src, dest} = require('gulp');
function copy() {
return src('src/public/style/*.css')
.pipe(dest('dist/style/'))
}
exports.default = copy;
Do someone know how to fix that please ?
I found this https://fettblog.eu/gulp-4-parallel-and-series/
As mentionned in this article, the new task execution using gulp 4 required gulp.series for sequential execution and gulp.parallel for parallel execution.
So try to add a build task with series like this, even if you have only 1 task :
const gulp = require('gulp');
const copy = () => {
return gulp.src('src/public/style/*.css')
.pipe(gulp.dest('dist/style/'))
}
const build = gulp.series(copy);
exports.default = build;
I fix the problem myself by using npm instead of yarn. To replace yarn, I deleted all dependencies file and then do a npm install, and just after a npx gulp - - watch and it works
How to create a HTML file with the same name as my pug file each time I save using gulp?
All the docs on https://pugjs.org/ explain how to return pug in console...
You need task runner or module bundler for that. So choose one -grunt/gulp/webpack. Consider webpack as newest one and width best functionality.
Here an example width gulp as moust easy to understand from my point of view.
First install npm packages for compiling pug and watch for changes - npm install --save gulp-pug gulp-watch.
Then create and config your gulpfile.js.
First import an npm modules
var pug = require('gulp-pug');
var watch = require('gulp-watch');
Then create compiling task
gulp.task('pug',function() {
return gulp.src('PATH_TO_TEMPLATES/*.jade')
.pipe(pug({
doctype: 'html',
pretty: false
}))
.pipe(gulp.dest('./src/main/webapp/'));
});
And then create watcher
gulp.task('watch', function () {
return watch('PATH_TO_TEMPLATES/*.jade', { ignoreInitial: false })
.pipe(gulp.dest('pug'));
});
And run gulp-watch from you console.
Here an example width gulp 4.0
install npm packages for compiling pug/jade by following command
npm install --save gulp-pug .
create script with name gulpfile.js
//gulpfile.js
var gulp = require("gulp"), pug = require('gulp-pug');
function pugToHtml(){
return gulp.src('src')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('dest'));
}
exports.pugToHtml = pugToHtml;
We can run the above code using the following command in your file directory:
gulp pugToHtml
You can now do the same without requiring gulp-watch as well.
Require module:
var pug = require('gulp-pug');
Task example:
//create task
gulp.task('pug', function buildHTML(){
gulp.src('src/pre/*.pug')
.pipe(pug())
.pipe(gulp.dest('src/post'));
});
Watch:
//pug serve
gulp.task('watch', ['pug'], function() {
gulp.watch(['src/pug-pre/*.pug'], ['pug']);
});
You can then run gulp watch. You can also set watch to the default task so you only have to write gulp in Terminal, if you are not automating anything else:
// default task
gulp.task('default', ['watch']);
I would like to run (and complete) my "clean" task before running the rest of my build task.
This currently works, although "run" is deprecated and I'd like to replace it:
gulp.task('build', ['clean'],function() {
gulp.run(['styles-nomaps','usemin','scripts','assets']);
});
What's the proper syntax?
You can use the run-sequence plugin.
You can use rimraf util to clean files, it can be run in sync mode:
clean.js:
var gulp = require('gulp');
var rimraf = require('rimraf');
gulp.task('clean', function(cb) {
rimraf.sync(paths.assets, cb); // Make sure you pass callback
});
In make it's possible to define custom targets that have no relevance to the actual code that they act upon, in the sense that they are language agnostic.
release_sortof:
#echo packaging release...
tar czf release.tar.gz file1 file2 file3
ls /dev/null
ls /dev/stderr
ls /dev/stdout
I know the example above is horrible, but the point I'm trying to illustrate is that the code in the release_sortof target doesn't depend on the fact that my project uses code written in C, for example; nor does it depend on me using Make built-ins such as foreach.
Is there a way to work with javascript/<INSERT-NAME>script files without using the ever insufficient plugins available for gulp? As in, could I lint my coffeescript with coffeelint by directly calling the coffeelint module:
var gulp = require('gulp')
, coffeelint = require('coffeelint')
;
gulp.task('lint', function() {
/* run coffeelint on source files */
});
Or can this only be done using plugins?
Another example would be to run arbitrary code like so:
var spawn = require('child_process').spawn;
gulp.task('blue', function() {
var child = spawn('ls');
/* do stuff with spawned child process */
});
I do this kind of thing for browserify using vinyl-source-stream - basically allowing you to use the library as it is, and not using gulp-* plugins.
var browserify = require('browserify'),
gulp = require('gulp'),
source = require('vinyl-source-stream'),
stringify = require('stringify'),
plumber = require('gulp-plumber'),
config = require('../config').scripts;
gulp.task('browserify', function () {
return browserify(config.app)
.transform(stringify(['.html']))
.bundle()
.pipe(plumber())
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.dest));
});
Heres the npm - https://www.npmjs.com/package/vinyl-source-stream
Use conventional text streams at the start of your gulp or vinyl
pipelines, making for nicer interoperability with the existing npm
stream ecosystem.
Maybe that will help you?
I'm looking to integrate more-css(https://github.com/army8735/more) into my gulp workflow. I've tried several different options. I'm not sure what the syntax to include a function of this type would be. Could someone clarify?
gulp.task('more-css', function () {
var moreCss = require('more-css');
return gulp.src('./in')
.pipe(moreCss.compress('paint.css', true))
.pipe(gulp.dest('./out'));
});
#Pradyumna's answer is not correct; gulp plugins are basically transform streams. It's not enough to use the node API directly, you have to wrap it in some streaming logic. Having had a brief look around on npm, there isn't a gulp plugin that you can use for more-css, so I made one. Install with:
npm install gulp-more-css --save-dev
And a code example:
var gulp = require('gulp');
var moreCSS = require('gulp-more-css');
gulp.task('default', function() {
return gulp.src('./in')
.pipe(moreCSS())
.pipe(gulp.dest('./out'));
});
https://github.com/ben-eb/gulp-more-css
var moreCss=require('more-css');
gulp.task('build', function(){
var cssFile='paint.css';//path to paint.css
gulp.src(cssFile)
.pipe(moreCss.compress(gulp.src(cssFile), true))
.pipe(gulp.dest('./out'));
});