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'));
Related
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.
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 have a directory structure like below:
All ES6 files are in the js directory. Now I want after compiling those files to put all of them into a dist directory but I do not know how can I do that.
I've added a Babel watcher in PhpStorm that has this configuration :
program :
D:\wamp\www\vuejs\node_modules\.bin\babel.cmd
Arguments :
$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output path to refresh :
dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
What changes should I make in the watcher configuration?
It can look as follows:
Arguments : $FileName$ --out-dir $ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$ --source-maps --presets env
Output path to refresh : $ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$\$FileNameWithoutExtension$.js:$ProjectFileDir$\public\dist\$FileDirPathFromParent(js)$\$FileNameWithoutExtension$.js.map
Working directory: $FileDir$
Note that Working directory: field is usually hidden, you need to expand Other Options: to see it
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);
How can I import or include my own javascript file into a gulpfile?
Gulp is installed via npm, so I can include other npm modules like this:
var sass = require('gulp-sass');
So I would like to do something like:
var karmaConfig = require('karma-config.js');
The directory structure is like this:
node_modules/
gulpfile.js
package.json
karma-config.js
so the gulpfile is at the same level as the file that I want to import.
You can do this by:
var karmaConfig = require('./karma-config');
And whatever this file exports can now be accessed from karmaConfig.
hendrikswan is right that you can leave off from the end .js as that's the default. But you don't need to.
The ./ part means that it should be found from the current folder rather than in node_modules. If your structure was like this:
node_modules/
gulpfile.js
package.json
config/karma.js
You would require it thus:
var karmaConfig = require('./config/karma');