My workspace is directory "Super gulp" and below, there is directories about my files. The problem is that I was converting my .pug files into html files, and put them in directory "goal" but when I run "dev" nothing comes out. I've tried method:(Gulp doesn't create folder?) and found the result didn't changed.
Example to convert pug files into html files and put watcher on them.
Step: 1 ->
First install npm packages for compiling pug and watch for changes
npm i -S gulp-pug gulp-watch
Step: 2 ->
Then create and config your gulpfile.js.
First import an npm modules
gulpfile.js
const pug = require('gulp-pug');
const watch = require('gulp-watch');
//Then create compiling task
gulp.task('pug',() => {
return gulp.src('./src/*.pug')
.pipe(pug({
doctype: 'html',
pretty: false
}))
.pipe(gulp.dest('./src/goal/'));
});
//And then create watcher
gulp.task('watch',() => {
return watch('./src/*.pug', { ignoreInitial: false })
.pipe(gulp.dest('pug'));
});
Step: 3 -> Run the below cmd to run the task
gulp watch
Related
I have a problem running gulp watch on huge number of files (>=40000). I have latest gulp (3.9.1), node (6.4.0), npm (3.10.3).
To replicate error you have to create sample files
mkdir test && cd test && for i in {1..40000}; do echo "tt" >> test$i; done
gulpfile.js
var gulp = require('gulp')
var src = './**/*';
// works normally
//var src = './*';
gulp.task('watch', function () {
gulp.watch(src, {read: false}).on('change', function(file) {
console.log('watch running');
});
});
gulp.task('default', ['watch']);
Running watch on directory with that many files just fails without any error. Is there any way to make it work?
I´m trying to build a gulp task that get all bower_components files with wiredep, then concatenates them together. Then concatenate some other JS files I have on a special folder an finally minify everything.
The problem is that I don´t know if I can specify wiredep another directory additional to the bower_components directory. If that´s not possible, is there any other solution I can use?
I´m a begginer using gulp, so any other error that you can point out in how I´m thinking my task would be highly appreciated.
var wiredep = require('wiredep')(
{
directory: 'static/bower_components', // default: '.bowerrc'.directory || bower_components
}).stream;
gulp.task('scripts',function(){
return gulp
.src('index.html') //I don´t really know what to put in the src
.pipe(wiredep())
.pipe($.inject(gulp.src("More JS files if wire dep can´t handle them")))
.pipe(minify())
.pipe(gulp.dest('static/dist/src/app.min.js'));
});
I would have a method like this (perhaps in a config file at the root of the project) to get whatever you wanted wired in with wiredep:
getWiredepDefaultOptions: function() {
var options = {
directory: bower.directory,//file path to /bower_components/
};
return options;
},
Then in your gulp task, have something like this:
gulp.task('wiredep', function() {
log('Wiring the bower dependencies into the html');
var wiredep = require('wiredep').stream;
var options = config.getWiredepDefaultOptions();
return gulp
.src('./index.html')
.pipe(wiredep(options))
.pipe(gulp.dest("wherever you want your index.html"));
});
Depending on what other things you want to wire in, you would have to add an ordering of some kind using tags within the index.html.
I'm currently trying to develop a module that will allow node to run Grunt tasks from the command line. This Node module is installed globally :
C:\Users\pcharpin\AppData\Roaming\npm\node_modules\task-app
The goal is that the use of "Grunt" commands is transparent to the user. To better explain my approach, a simple example of the use of my node module:
C:\Users\pcharpin\Desktop\demo-app> task-app copy
In this example, my module will copy a source directory to a destination directory.
Unfortunately, when I run the task Grunt, my node module indicates to me that there is no file "Gruntfile.js" within the directory "demo-app". However, this file should be found by my Node module within its own directory.
My tree Node module:
Task app
node_modules
grunt
src
task-app.js
Gruntfile.js
package.json
README.md
...
My task-app.js file, here's the code:
#!/Usr/bin/env node
var grunt = require('grunt');
var args = process.argv.splice(2)
checkArguments(args);
checkArguments function(args) {
[...]
runCopy();
}
runCopy = function() {
var spawn = require('child_process') spawn.
var exec = spawn('cmd', ['/ c', 'grunt copy']);
exec.stdout.on("data", function (data) {
console.log('' + data);
});
exec.stderr.on('data', function (data) {
console.log('' + data);
});
}
Then in my "Gruntfile.js" file, I have the code to perform the copy of the source to the destination directory:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy {
srcWeb {
files: [{
cwd: '<%= pkg.srcWeb%>', //root to copy
src: '**/*', // copy all files and subfolders
dest: '<%= pkg.name%>/www/', // destination folder
expand: true // When required using cwd
}]
}
}
});
I don't understand why the Node module is not found in the "Gruntfile.js" file.
Is it required to have a file "Gruntfile.js" in this project directory? Is there another solution?
I would like to know too, is it possible that the file "Gruntfile.js" can read the file "package.json" in the project directory? This is to allow the user to configure this file to change the source path for example.
EDIT :
After some researches, I'm getting closer to the solution to my problem. To change the execution of "Gruntfile.js" which is the current directory by default, we can use --gruntfile option in command line.
As indicated in the source code grunt (grunt/lib/grunt/tasks.js) :
//Get any local Gruntfile or tasks that might exist. Use --gruntfile override
//if specified, otherwise search the current directory or any parent.
How can I specify the path of "Gruntfile.js" (found in my node module installed globally) for any Windows user ?
Here's an example :
C:\Users\username\projects\demo-app> task-app copy
In my source code, I execute the grunt task like this with --gruntfile option :
runCopy = function() {
var spawn = require('child_process').spawn;
var pathGruntfile = 'C:\Users\username\AppData\Roaming\npm\node_module\task-app';
var exec = spawn('cmd', ['/ c', 'grunt --gruntfile' + pathGruntfile + ' Gruntfile.js']);
exec.stdout.on("data", function (data) {
console.log('' + data);
});
exec.stderr.on('data', function (data) {
console.log('' + data);
});
}
EDIT 2 :
Pending a response, I found a temporary solution to get the "Gruntfiles.js" inside my Node module. But the disadvantage is to install all Node modules dependancies and my Node Module locally in the current directory.
var pathDirCurrent = process.cwd();
var pathGruntfile = pathDirCurrent.concat('\\node_modules\\task-app\\Gruntfile.js');
var spawn = require('child_process').spawn;
var exec = spawn('cmd', ['/c', 'grunt --gruntfile ' + pathGruntfile + ' create']);
exec.stdout.on("data", function(data) {
console.log('' + data);
});
Where are you running grunt from?
Your projects structure and grunt file looks OK. Maybe try and include a base task:
grunt.registerTask('default', ['copy']);
Finally, I understand the logic of using Grunt tasks. When you have a web project application which need to use tasks grunt, it must have the Gruntfile.js in current directory.
However, like as I said from my "edit 2", we can specified the Gruntfile.js with ---gruntfile option. So, it's not a disadvantage cause Grunt tool works with the Gruntfile.js in current directory where there is your web project application.
For each task grunt, I use the --gruntfile option to specify the path of Gruntfile.js as my example from "edit 2".
I want to compile jade in html using gulp-jade. But after the task in the "build" folder does not have html files.
gulpfile.js
gulp.task('jade', function() {
return gulp.src('app/assets/template/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('build'))
.pipe($.size({title: 'jade'}));
});
Command-line:
PS E:\WORKS\fitover> gulp jade
[21:09:36] Using gulpfile E:\WORKS\fitover\gulpfile.js
[21:09:36] Starting 'jade'...
[21:09:36] 'jade' all files 0 B
[21:09:36] Finished 'jade' after 372 ms
Try
.pipe(gulp.dest('./build/'))
Or make sure the relative path to your build file is correct from your gulp task.
Tested on Ubuntu - the same result.
The solution is found. Not sure that this is the right decision, but it works. After commenting #Plato, I read the guide, and use the grunt-contrib-jade combined with a gulp-grunt.
I have the following bower.json:
{
"name": "myname",
"dependencies": {
"stripe": "https://js.stripe.com/v2/"
}
}
This grabs the javascript at the associated url and creates the following file:
/bower_components/stripe/index
Note that the file is not index.js, but simply index. This is problematic, as my Brocfile refuses to use the index file, insisting that it has to be index.js. If I manually change the name to index.js, then the application works fine. Obviously, this isn't a satisfactory solution.
So is there a way to get bower to install the file as index.js rather than index?
If you need to set a different folder for bower you can create a .bowerrc file with the following:
{
"directory": "public/bower"
}
I'm not exactly sure of your environment, but for example if you have node.js you can create a gulp.js setup which would do the rename before whatever other processes you need to run.
quasi example gulpfile.js
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('prep', function () {
gulp.src('public/bower/stripe/index', {
base: 'public/bower/stripe'
})
.pipe(rename('index.js'));
.pipe(gulp.dest('./'));
});