Here's the initial directory structure:
./src
./src/test.html
./gulpfile.js
The goal is simply to copy "src/test.html" to "build/index.html". I'm using the base base option in order to maintain the directory structure relative to src/ within the build/ dir.
Here's gulpfile.js
var gulp = require('gulp');
var replace = require('gulp-replace');
gulp.task('default', function() {
return gulp.src(['test.html'], {base: './src'})
.pipe(gulp.dest('build'));
});
When I run gulp, I get no errors.
$ gulp
[15:26:24] Using gulpfile /tmp/testproject/gulpfile.js
[15:26:24] Starting 'default'...
[15:26:24] Finished 'default' after 8.02 ms
However, it did not create the build directory:
$ find .
.
./src
./src/test.html
./gulpfile.js
Amy I missing something here?
gulp.src is searching the file in the folder where the gulpfile.js is.
You should change your task to :
gulp.task('default', function() {
return gulp.src(['src/test.html'], {base: 'src'})
.pipe(gulp.dest('build'));
});
The base parameter is used by gulp.src for calculating the relative paths it has to put in the output stream not for setting its "current" folder for reading the files.
Related
I am new to gulp and want to use it to convert SASS to CSS. I have a src folder which has some scss files deep inside, and I want to mirror it to the public folder but as css files. This it the gulp code
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('src/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('src/**/*.scss',['styles']);
});
but when I run node gulp the program just ends without any error or messages. Shouldn't it stay running to do te file listening (i.e. watch)? Also when I edit a .scss file, it does not create a public folder with the .css file.
Thanks
You need to run gulp no node gulp
You also need to add the styles task in the default one.
gulp.task('watch', function() {
gulp.watch('src/**/*.scss',['styles']);
});
gulp.task('default', ['watch', 'styles'])
I'm trying to use gulp-elm with a monolithic architecture. I have setup my project dir with client and server directories and I've put my gulp file in the main directory. The directory structure is pretty simple.
project/
gulpfile.js
package.json
client/
elm-package.json
server/
...
When i run, for example,
gulp elm-init
with the following task:
// File paths
var paths = {
dest: 'client/dist',
elm: 'client/src/*.elm',
static: 'client/src/*.{html,css}'
};
// Init Elm
gulp.task('elm-init', function(){
return elm.init({ cwd : 'client' });
});
// Compile Elm to HTML
/*gulp.task('elm', ['elm-init'], function(){
return gulp.src(paths.elm)
.pipe(plumber())
.pipe(elm({ cwd : 'client' }))
.pipe(gulp.dest(paths.dest));
});*/
the elm-stuff folder and elm-package.json get moved to the main project directory. Is this expected? if not, is there a correct way to use a gulpfile from the parent directory to build an elm package in a nested directory? I think my effort matches the example.
gulp.task('init-nested', function(){
return elm.init({cwd: 'elm/nested-elm/'});
});
gulp.task('nested', ['init-nested'], function(){
return gulp.src('elm/nested-elm/*.elm')
.pipe(elm.make({filetype: 'html', cwd: 'elm/nested-elm/'}))
.pipe(gulp.dest('dest/'));
});
I've tried looking at the source, as well as following dependencies to see if i could figure it out myself, but i'm relatively unfamiliar with node so it's hard for me to figure out exactly what's going on in the gulp-elm source (as well as one of the deps i checked out.)
I was using this tutorial by Auth0 which had an old version of gulp-elm in package.json. Ugh!
I have the following code, but it can't read files from src folder. Does anyone know the path where gulp read file from?
gulp.task('default', function() {
return gulp.src(__dirname + './src/*')
.pipe() ...//other code
});
Folder structure:
--app
--gulp
--gulpfile.js
--src
--(files-to-be-read, for example: 1.png)
The __dirname global returns the current directory and will not include aditional slash at the end, so concatenating './otherDir' will become '/dir./otherDir'.
Just remove the dot from the string to concatenate.
https://nodejs.org/docs/latest/api/globals.html
I would think - because I am not a Node.js expert - that Gulp uses the current working directory.
The directory which contains the package.json and the Gulp script.
So, when invoking Gulp in the app/gulp directory, you can get away with this:
gulp.task('default', function() {
return gulp.src('src/*')
.pipe() ...//other code
});
You can also use relative paths from that dir, like this:
gulp.task('other', function() {
return gulp.src('../../whatever/*')
.pipe() ...//other code
});
I want Gulp to load and run a task that is in a different folder.
For example:
files tree:
root
lib
task.js
proj
gulpfile.js
task.js:
var gulp = require('gulp');
gulp.task('myTask', function() {
console.log('done!');
});
and gulpfile.js:
var gulp = require('gulp');
gulp.task('default', ['myTask']);
What I've tried so far:
require('../lib/task.js')
require('require-dir')('../lib/')
In both cases I can see task.js is loaded, but I get the following error:
Task 'myTask' is not in your gulpfile
When task.js is in the proj folder or in a sub folder of it - it works fine,
so I think it has something to do about going up to the parent folder through "../" .
Why is this happening and what can be done?
you can use NodeJS's global or module.exports for this purpose.
http://www.hacksparrow.com/global-variables-in-node-js.html
To make my gulpfile.js easier to read, I put all of my gulp tasks in a gulp/ directory. The only thing I now do in my gulpfile.js is require in the whole directory like this:
var requireDir = require('require-dir');
requireDir('./gulp');
An example task file is `default.js'
gulp.task('default', function() {
// Do stuff here
});
I now use the same gulp stuff in multiple projects, so I create a npm module and packaged all of my gulp tasks into it. When I try to change my gulpfile.js to point at the directory with the same contenxt in node_modules like this:
var requireDir = require('require-dir');
requireDir('./node_modules/my-gulp/gulp');
it doesn't find any of my tasks. It is the same directory as before, so why won't it work? What can I do to pull in multiple gulp tasks in this manner?