Gulp: see below as an example
How to copy files ending with .html in a directory and its subdirectories?
How to copy files that not ending with .js in a directory and its subdirectories.
--dirA
--dirB
--b.html
--b.js
--dirC
--c.html
--index.html
Like jacmoe answered, if you need to get specific files in gulp, use that kind of syntax:
'/directory/*.fileextension' //Get all files in directory with .extension
'!/directory*.fileextension' //Ignore files with .extension
'/directory/**/*.fileextension' //Get all files in directory AND all subdirectories with .extension
And remember that gulp paths support arrays so you can write something like that:
['!/directory/**/*.js', '/directory/**/*'] //Get all files except .js files
Or if needed only specific files:
['/directory/**/*.html'] //Get all .html files
If I am not totally mistaken:
gulp.task('copyHTML', function() {
return gulp.src('directory/**/*.html')
.pipe(gulp.dest('copied/html'));
});
That code will copy any file ending in .html in any directory beneath the directory directory.
Related
I am trying to zip a folder and all its subdirectories and files included using gulp-zip. I have tried these codes:
gulp.src('wp_plugins/zion_slider/')
.pipe(zip('zion_slider.zip'))
.pipe(gulp.dest('wp_boilerplate/inc/plugins/'));
This one just takes the folder not the subdirectories or files
gulp.src('wp_plugins/zion_slider/**/*.*')
.pipe(zip('zion_slider.zip'))
.pipe(gulp.dest('wp_boilerplate/inc/plugins/'));
This one take only files and subdirectories not the parent.
As I want to zip the parent folder and the subdirectories and files, none of the above work for me.
Can anybody suggest anything, please?
Thanks in advance.
Set the base directory in gulp-src
gulp.src('wp_plugins/zion_slider/*', {base: './'})
.pipe(zip('zion_slider.zip'))
.pipe(gulp.dest('wp_boilerplate/inc/plugins/'));
EDIT
Right you are, I misunderstood and had the wrong glob. Here try this one. The output is a zip file named zion_slider.zip that contains the zion_slider/ folder with all files and sub dirs. You can play around with the paths to get what you want. For example if you want the .zip file to not include the zion_slider folder you can use {base: wp_plugins/zion_slider }
gulp.task('default', () => {
gulp.src('wp_plugins/**/*', {base: './wp_plugins'})
.pipe(zip('zion_slider.zip'))
.pipe(gulp.dest('dist'));
});
EDIT
gulp.src('wp_plugins/zion_slider/**')
.pipe(zip('zion_slider.zip'))
.pipe(gulp.dest('wp_boilerplate/inc/plugins/'));
This also works.
My src folder contains both *.js files and *.min.js files. I just need to delete all files leaving *.min.js files intact using gulp. I tried this
return del.sync([
'js/**/*',
'!js/**/*.min.js']);
But this deletes all files in the src folder how do I proceed. considering that the src folder also contains other formats other than js
I have a folder structure like this
ProjectX
.......|_____node_modules
.......|_____src
.......|_____build
.......|_____app
.......|_____libraries
I have written a glob pattern in grunt browserify something like this
src:['**/*.js','!node_modules','!build'],
dest:'build/build.js'
What i want from above code is, all .js files in my project should be browserified except the .js files in 'node_modules' and 'build' folder.
But what actually is happening is still the files from node_modules and build folder are browserified in my 'build/build.js' destination.
And i do not want to specify folder names of the .js file i require. I do not want to do something like this
['src/**/*.js' ... etc]
How can i solve this problem?
I am trying to load a file called styles.css which is located in
~/Content/css/styles.css
What I tried is adding it to the _Layout page
<link rel="stylesheet" href="~/Content/css/styles.css" />
This gives a 404 on that location.
I like the way how bower handles external libraries and gulp magically does all the other stuff like minifying a file when I request a minified version, but through all this newness I cannot add a simple static file of my own.
Could someone be so kind to help me reference my own styles.css file?
Joe wrote in his answer:
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot.
To elaborate on this:
In Gulp there are four APIs, being:
gulp.task: Define a task
gulp.src: Read files
gulp.dest: Write the files
gulp.watch: Watch the files
To write files from example CSS files from a source to a destination (what I wanted to do), you can define a task as follows:
var gulp = require('gulp')
var paths = {
webroot: './wwwroot/',
cssContent: './Content/css/**/*.css'
};
paths.jsDest = paths.webroot + 'js/';
paths.cssDest = paths.webroot + 'css/';
gulp.task('build:ccs', function () { // Define a task called build.css
console.log('Building Cascading Style Sheets...')
gulp.src(paths.cssContent) // Look for files in the source.
// Do optional other stuff
.pipe(gulp.dest(paths.cssDest)); // Put it in the wwwroot.
});
All this will do is move files from the gulp.src cssContent (my local directory) to the gulp.dest cssDest (the webroot).
To run this before every build specify this go to "View > Other Windows > Task Runner Explorer", right click on the task that appeared called build:ccs and select "Bindings > Before Build".
You can do a lot more with Gulp like minifying, combining, analyzing, adding references to file, but these are the basics.
Note: I learned the above from JavaScript Build Automation With Gulp.js on Pluralsight.
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot
I want to Gulp Copy Multiple Files
gulp.task('copy', function(){
gulp.src(
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery.stellar/src/jquery.stellar.js',
'bower_components/jquery-waypoints/waypoints.js',
'bower_components/jquery-easing-original/jquery.easing.1.3.js')
.pipe(gulp.dest('public/assets/js'));
});
To copy my files from my bower_components directory to my assets directory, but it is only working with the first line (bootstrap.js), all others are ignored.
I wouldn't like to pipe every single file to the destination directory.
How would I go about to do this?
regards,
George
P.S.
I am using it just for devel. In production I would concatenate and minify them before I deploy them. Nonetheless I believe that the task is clear, I want the bower_components to show up my public folder. I think that it is a little bit tedious to have all the files on the bower_components folder, only to copy them into your public directory. Is there any other best practice to use the bower component files?
Try to add [], like this:
gulp.src([
'file1',
'file2',
'file3'
])
.pipe(gulp.dest('public/assets/js'));