I have wanted to delete two folders inside the folder 'dest' so I did
gulp.task('del', function () {
// add task
return gulp.src('./app/static/dest', {read: false})
.pipe(clean());
});
Under dest folder, there are js and css folder and inside them there are js and css files respectively. When I run gulp, it deletes js folder and files successfully but does not delete the css files. What is the problem?
By the way the default task function is:
gulp.task('default', ['del'], function() {
gulp.start('transform');
gulp.start('styles');
gulp.watch('./app/static/src/js/*.js', ['transform'])
gulp.watch('./app/static/src/css/*.scss', ['styles'])
});
Related
I have a gulp-watch script that watches for changes in my image directory then process the images. The problem is that photoshop save for web is putting temp files in the directory and then renaming them very quickly, which trips up my image processing script. I would like to exclude them from the watch script.
The temp files are formatted as so moog-mftrem_tmp489245944
I would like to use the _tmp string to exclude, but not sure how to exclude characters in the middle of a file name. Here is what I have tried but doesn't seem to work:
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/*.png','!app/images/pedals/*_tmp*'], ['images']);
});
Thanks for any help!
While your temp files don't have extensions, glob paths don't know what to do if you don't specify one. It becomes merely a path to a folder, and indeed it doesn't find a folder name matching your glob.
Try:
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/*.png','!app/images/pedals/*_tmp*.*'], ['images']);
});
Note the extra: .* (period asterisk)
For completeness I like to add the recursive globstar /**/
i.e.
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/**/*.png','!app/images/pedals/**/*_tmp*.*'], ['images']);
});
consider using 'gulp-filter' :
const gulp = require('gulp');
const filter = require('gulp-filter');
gulp.task('watch', function() {
gulp.watch('app/images/pedals/*.png', ['images']);
});
const f = filter(file => file.path.includes('tmp'));
gulp.task('images', function() {
return gulp.src('app/images/pedals/*.png')
.pipe(f)
.pipe(gulp.dest('./build'))
});
I have a shared SCSS source files which must be compiled and copied into different project folders.
I have a build task which calls 2 tasks, clean and styles(to compile/minify and copy to build folder).
My source SCSS files are shared between all websites however the destination folders are different.
I would like to be able to run: build websiteA and then clean build folder inside websiteA and compile files from a shared folder and copied to build folder inside Website A.
var assetsDir = '_Assets';
var buildStyleWebsiteA = 'WebsiteA/Assets/build';
var buildStyleWebsiteB = 'WebsiteB/Assets/build';
gulp.task('clean-websiteA', function (cb) {
return del([buildStyleWebsiteA ], cb);
});
gulp.task('styles-websiteA', ['clean-websiteA'], function () {
return gulp.src(assetsDir + '/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest(buildStyleWebsiteA + '/css'))
.pipe(concat('styles.css'))
.pipe(cleanCss())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(buildStyleWebsiteA + '/min/'))
.pipe(liveReload());
});
gulp.task('build-websiteA', ['styles']);
PS: I also have same tasks for websiteB (build-websiteB, clean-websiteB, and style-websiteB).
So I ended up with repetitive code and I know there must be a better way.
What I would like to have is provide website name as a parameter for gulp command and then it runs clean and style using correct folder related to that website.
How can I refactor my code to achieve that?
Thanks
I would use environment variables to accomplish this rather than arguments.
var buildDir = process.env.BUILD_DIR + '/Assets/build';
Then you would call it as:
BUILD_DIR=websiteA gulp build
I have a gulp task to move fonts:
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#1.0.17-alpha.3/fonts/*')
.pipe(gulp.dest('./build/fonts/'));
});
This working however the my-package number will change. Im trying to alter the gulp task so that it will still work when the package number changes:
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#*/fonts/*')
.pipe(gulp.dest('./build/fonts/'));
});
This does move the fonts but it also adds some folders.
This is what it does:
./build/fonts/my-package#1.0.17-alpha.3/fonts/ (fonts here)
What I need is this:
./build/fonts/ (fonts here)
Ive fixed this with gulp-flatten:
var flatten = require('gulp-flatten');
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#1.0.17-alpha.3/fonts/*')
.pipe(flatten())
.pipe(gulp.dest('./build/fonts/'));
});
https://www.npmjs.com/package/gulp-flatten
I would like to create a resources.zip file which will contain css/styles.css.
So far I have got most of this working, the only problem is the archive only contains the styles.css file and not its parent directory css.
gulpfile.js
const gulp = require('gulp');
const zip = require('gulp-zip');
gulp.task('default', () => {
return gulp.src('css/*')
.pipe(zip('resources.zip'))
.pipe(gulp.dest('build'));
});
I think you need to setup the base for the gulp.src:
gulp.src('css/*', {base: '.'})
This is because the default base is:
Default: everything before a glob starts (see glob2base)
source. Zipped file path: zip.
Here is the 'usemin' section of the gulpfile.js
// usemin Task
gulp.task('usemin', function() {
gulp.src('./*.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
html: [minifyHtml({empty: true})],
js: [uglify(), rev()]
}))
.pipe(gulp.dest('build/'));
});
When I run 'gulp' it generates all the files I need in the build folder but does not update the links in the index.html file with the newly generated files (minified and concatenated).
Can anyone help me with what I am doing wrong?