-
-
Save maxxon15/8806070 to your computer and use it in GitHub Desktop.
var gulp = require('gulp'), | |
autoprefixer = require('gulp-autoprefixer'), | |
minifycss = require('gulp-minify-css'), | |
uglify = require('gulp-uglify'), | |
rename = require('gulp-rename'), | |
concatenate = require('gulp-concat'); | |
gulp.task('styles', function(){ | |
return gulp.src('assets/stylesheets/*.css') | |
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ios 6', 'android 4')) | |
.pipe(concatenate('styles.css')) | |
.pipe(gulp.dest('build/assets/stylesheets')) | |
.pipe(minifycss()) | |
.pipe(gulp.dest('build/assets/stylesheets')); | |
}); | |
gulp.task('scripts', function(){ | |
return gulp.src('assets/scripts/*.js') | |
.pipe(uglify()) | |
.pipe(gulp.dest('build/assets/scripts')); | |
}); | |
gulp.task('copy-files', function(){ | |
return gulp.src(['assets/fonts/**','assets/images/**']) | |
.pipe(gulp.dest('build/assets/')); | |
}); | |
gulp.task('copy-html', function(){ | |
return gulp.src(['**/**/*.html','!node_modules/**']) | |
.pipe(gulp.dest('build/')); | |
}); | |
gulp.task('watch', function(){ | |
gulp.watch(['**/**/*.html','!node_modules/**'], ['copy-html']); | |
gulp.watch(['assets/fonts/**','assets/images/**'], ['copy-files']); | |
gulp.watch('assets/stylesheets/*.css', ['styles']); | |
gulp.watch('assets/scripts/*.js',['scripts']); | |
}); | |
gulp.task('default', function() { | |
gulp.start('copy-html', 'copy-files', 'styles', 'scripts'); | |
}); |
Yes. The root directory does contain the build
directory.
Sometimes there are multiple files in specific folders in the root directory which contains index.html
files... For eg:
contact
index.html
work
index.html
services
index.html
What I wanted to do is target all those folders and their containing index.html
files and put it in the build
folder.
Sure I can specify multiple paths and update them manually, but I wanted to automate the process.
Is that possible? Or should I just stick to manually updating the gulpfile everytime a new folder/file is added?
Ok. I know what you mean.
The problem is with the way directories are organised for your project. Your directory structure should be like this,
.
├── app
│ ├── assets
│ | ├── stylesheets
│ | | └── [all *.css files]
│ | └── scripts
│ | └── [all *.js files]
│ ├── contact
| | └── index.html
│ ├── work
| | └── index.html
│ └── services
| | └── index.html
| └── index.html
├── build
| └── [will contain all the files processed by gulp]
├── package.json
├── gulpfile.js
└── node_modules
The trick is to wrap your entire project folder into the app
directory and all the files processed by gulp into the build
directory. Both the folders must lie at the same directory level.
For your question,
Is that possible? Or should I just stick to manually updating the gulpfile everytime a new folder/file is added?
It is always recommended to use a generic pattern for files keeping in mind the longevity of the project, as updating gulpfile.js
everytime is a big pain. Hence, your intention is correct. So now your copy-html
gulp task will look something like this,
gulp.task('copy-html', function() {
gulp.src('app/**/*.html')
.pipe(gulp.dest('build'));
});
app/**/*.html
will take every.html
file in theapp
directory and all of its sub-directories into its scope.- No need to exclude
node_modules
directory as it is no longer inside theapp
directory. Anyways project dependencies should always be outside the main project folder (app
).
I see. What exactly do you mean by project dependencies? The css/js/image files?
node_module
directory is known as the project dependencies that is reqd. to perform build.
css/js/img
are the project assets.
gulpfile.js/package.json,_config.yml
are the build configs.
There is no strict nomenclature though :). I just made up the above list on the fly.
haha! Thanks a lot. :D I might talk to you again when I start with bowerJS though.
Couple of things that I found incorrect,
Line no 29
Starting a path with
**
is dangerous. I imagine the root directory (from where this is run) also contains thebuild
directory which is getting copied over and over again. Try to give a more specific path. If you have multiplesrc
paths, then you can specify each of them individually.Double
**
is unnecessary. A single**
also does the same thing. The following pattern rules will help you understand better,*
- matches any number of characters, but not/
.?
- matches a single character, but not/
.**
- matches any number of characters, including /, as long as it's the only thing in a path part.{}
- allows for a comma-separated list of "or" expressions.!
- at the beginning of a pattern will negate the match.Get rid of the trailing
/
in thegulp.dest('build/')
. Simplybuild
is fine.I think what you trying to do this,