I have my src/ directory as follows:
src/
---about/
------history.pug
------mission.pug
---contact/
------email.pug
---index.pug
I want my .pug files to be compiled in such a way that they maintain this directory hierarchy even in the dist/ directory. Something like:
dist/
---about/
------history.html
------mission.html
---contact/
------email.html
---index.html
I'm using Gulp to process the pug files. Can this be achieved with one task using gulp, or otherwise? Thanks!
The Gulp task for handling my pug files:
gulp.task('pug', function() {
return gulp.src('src/pug/*.pug')
.pipe(pug({
basedir: "./"
}))
.pipe(gulp.dest('dist/html'));
})
gulp.task('pug', function() {
return gulp.src('src/**/*.pug')
.pipe(pug())
.pipe(gulp.dest('dist'));
})
will get your pug files and put them where I think you want. In your code you have
.pipe(gulp.dest('dist/html'));
but there is no html folder in your desired dist folder structure. Same comment as to
gulp.src('src/pug/*.pug')
Your src directory does not have a pug subfolder, so why is src/pug here?
Also I don't think {basedir:....} is an option to the pug plugin so I removed it.
Related
I currently have my directories setup such that my whole React project, including index.html, is inside my src/ directory. When I run npm run build, all of my .js/css files are put into my /dist folder. However, my index.html isn't being included. I installed html-loader and set it up in my webpack.config.js as such:
{
test: /\.html$/,
include: APP_DIR, //let APP_DIR = path.resolve(__dirname, 'src')//
loader: 'html-loader'
}
My understanding was that this would add my index.html file into my dist/ after running a build but it's not. I've looked at the html-webpack-plugin but what I gather from that is that it generates an index.html file for you but I don't need one generated for me. I just want to include the one I already created.
I later realized that the html-webpack-plugin allows for a template option which, in my case, would be my own src/index.html file. It just copies it over into the index.html it generates in my dist/ folder.
I currently have a file structure like this
SASS
gulpfile.js
node_modules
sites
example-site
scss
css
example-site-two
scss
css
example-site-three
scss
css
I have gulp installed in the main parent SASS folder with a task 'sass-all' that can go through every single sites scss folder and compile it into css.
I'm trying to write a new task called 'sass-single' which can be run from any of the example-site folders. So let's say I'm in the folder "example-site-two", I want to be able to cmd and do 'gulp sass-single' and ONLY have it compile the SASS in this site. Same thing for a watch-single task I'd like to setup.
Problem is whenever I run this task from a site folder, it changes my working directory up to the parent SASS folder. I don't want to have 100 different tasks for every different site, I'd prefer to just have one 'sass-single' task thats smart enough to only compile the files from the folder I was in when I ran the script.
current Gulp task attempt
gulp.task('sass-single', function () {
process.chdir('./');
// Where are the SCSS files?
var input = './scss/*.scss';
// Where do you want to save the compiles CSS file?
var output = './css';
return gulp
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
However this goes back to the main SASS folder and then just does nothing.
How would I go about modifying this to be able to run from any site folder and have it only do it for that site?
If you want to change the current working directory (CWD) back to the directory where you invoked gulp then this won't work:
process.chdir('./');
That's a relative path. Relative paths are relative to the CWD. But by the time you execute process.chdir('./') Gulp has already changed the CWD to the directory where your Gulpfile.js is located. So you're just changing the CWD to ... the CWD.
You could explicitly pass a CWD to gulp on the command line:
SASS/sites/example-site> gulp --cwd .
But that would get annoying pretty quickly.
Luckily for you Gulp stores the original CWD in process.env.INIT_CWD before changing it. So you can use the following in your task to change the CWD back to the original:
process.chdir(process.env.INIT_CWD);
I have a directory setup like this:
node_modules
src
index.js
I'm trying to copy these to a dist folder like this:
node_modules
index.js
I've tried a number of variations, such as
gulp.src(['src/**/*', 'node_modules/**']).pipe(gulp.dest('dist'));
But this places all of the node_modules in the /dist and not within the node_modules directory.
Any idea how I can do this?
You need to tell gulp.src that the base directory for node_modules/** is . so that the node_modules created at the destination. However, you cannot set the base to . for src/**/* because that would mean that the src directory would be created in your destination. So you need in effect to specify two sets of sources. gulp-add-src can help with this.
Something like this should work:
var addsrc = require("gulp-add-src");
gulp.src('src/**/*')
.pipe(addsrc('node_modules/**', { base: '.'})
.pipe(gulp.dest('dist'));
I am using WebStorm 9, I have a very basic gulp file script setup to copy 1 file from directory src to directory build.
I have found that when changing the content of index.html file in the src directory gulp copies the file fine to the build directory... but WebStorm does not show that unless I use File | Synchronize.
Why is this? How can I get WebStorm to show the change without using File | Synchronize?
My gulp file consists of the following:
var gulp = require('gulp')
gulp.task('copyme', function(){
return gulp.src('./src/index.html')
.pipe(gulp.dest('./build/index.html'));
});
gulp.task('watch', function(){
gulp.watch('./src/index.html', ['copyme']);
})
IDEA-136705 is closed as fixed, fix should become available in WebStorm 10
I'm struggling to get gulp-compass working correctly without using a config.rb file.
Prerequisites:
I don't want to use a config.rb file
I need to use compass (can't just use SASS)
The docs say:
var compass = require('gulp-compass'),
path = require('path');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
project: path.join(__dirname, 'assets'),
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
But I can't find the following information anywhere:
What path = require('path') does. This doesn't seem to be a gulp-plugin.
What path.join does exactly.
What __dirname is and should it be changed?
If anyone can clear this up it would be much appreciated.
Path is a Node core module. Its join method allow you to join arguments that will construct a normalised path. __dirname refers to the directory of the file in which it is used.
Basically it's simply to refers to the assets directory which is in the same folder as your gulpfile.
By the way, the gulp-ruby-sass plugin has a compass option that you can set to true.