-
-
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'); | |
}); |
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.
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:What I wanted to do is target all those folders and their containing
index.html
files and put it in thebuild
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?