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'));
Related
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
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.
I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});
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