my app created by generator-gulp-webapp, i load some plugins with bower, and some plugin depend on .swf files, such as zeroclipboard and uploader, and my problem is how to move swf files to * folder when i build this app?
eg:
gulp.task('extras', () => {
return gulp.src([
'app/.',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.swf'
], {
dot: true
}).pipe(gulp.dest('dist/scripts'));
});
how to Merger that to one task?
i just add one more task!
gulp.task('swf', () => {
return gulp.src([
'app/scripts/*.swf'
], {
dot: true
}).pipe(gulp.dest('dist/scripts'));
});
done!!!
Related
I have a Hugo site and I'm using Netlify CMS to manage the content. Everytime the site builds, it runs a Gulp task that optimizes images from the src folder to the static folder. But, the problem is, when I upload an image through the CMS, it stores it in the static folder.
So, in the admin config.yml, should I set the media_folder to src/images instead?
My thinking is that the task will run and store the new minified image into the static folder but is that right? Or is there another way to do this?
Gulp task:
gulp.task('images', () => {
return gulp.src('src/images/**/*.{png,jpg,jpeg,gif,svg,webp,ico}')
.pipe($.newer('static/images'))
.pipe($.print())
.pipe($.imagemin([
$.imagemin.jpegtran({progressive: true}),
$.imagemin.optipng({optimizationLevel: 5}),
]))
.pipe(gulp.dest('static/images'));
});
Admin config.yml
media_folder: "static/images"
public_folder: "images"
Just configure Netlify CMS to upload files to a different location, i.e. a page bundle, then Hugo can take care of image optimisation natively.
In your content repository, you can make a build script (build & deploy if hosted on Netlify) and it can resize and optimise images and put them into a new folder anytime it detects new content. Most importantly, remove EXIF data such as Geolocation.
const path = require('path');
const gm = require('gm');
const fs = require('fs-extra');
const klaw = require('klaw');
const mediaDir = path.resolve(__dirname, 'media');
const imagesDir = path.resolve(__dirname, 'images');
const sizes = [
{size: 1280, rename: false},
{size: 640, rename: true},
{size: 320, rename: true},
];
const imagesToProcess = [];
(async () => {
await fs.ensureDir(imagesDir);
klaw(mediaDir)
.on('data', (item) => {
const stat = fs.lstatSync(item.path);
const copyPath = path.resolve(imagesDir, path.basename(item.path));
if (stat.isFile() && !fs.pathExistsSync(copyPath)) {
imagesToProcess.push([item.path, copyPath]);
}
})
.on('end', () => {
imagesToProcess.reduce((promise, [originalImage, copyPath]) => {
sizes.reduce((promise, sizeObject) => {
return promise.then(() => new Promise((resolve) => {
gm(originalImage)
.noProfile()
.resizeExact(sizeObject.size, sizeObject.size)
.quality(75)
.write(copyPath.replace('.jpg', `-${sizeObject.size}.jpg`), () => resolve());
}));
}, promise);
}, Promise.resolve());
});
})();
I have a gulpfile.js that uses Rollup to build two distinct JS files (front-end and admin). The rollup.config.js method allows multiple entry points and bundles to be specified, but to achieve this with Gulp I've had to do a bit of a nasty workaround.
const javascripts = [
{
src: './app/assets/javascripts/main.js',
dest: './public/javascripts/main.js',
moduleName: 'main'
},
{
src: './admin/assets/javascripts/admin.js',
dest: './public/admin/javascripts/admin.js',
moduleName: 'admin'
}
]
gulp.task('js:compile', ()=> {
javascripts.forEach((item)=> {
return rollup({
input: item.src,
plugins: [
builtins(),
nodeResolve({ jsnext: true, browser: true }),
commonjs({
include: 'node_modules/**',
exclude: 'node_modules/rollup-plugin-node-globals/**',
ignoreGlobal: false,
sourceMap: true,
main: true,
browser: true
}),
json(),
buble()
]
}).then(function (bundle) {
return bundle.write({
format: 'iife',
name: item.moduleName,
file: item.dest
})
})
})
})
Is there a better way of achieving this? I'm not averse to reorganising my files to use globbing or something similar.
EDIT: I've updated it to use Node's fs rather than having to specify each script but this still feels a bit clunky to me.
gulp.task('js:compile', () => {
fs.readdir('./app/assets/javascripts', (err, files) => {
if(err) throw err
files.forEach((file) => {
if(!file.match('.js')) return false
return rollup({
input: `./app/assets/javascripts/${file}`,
plugins: [
builtins(),
nodeResolve({ jsnext: true, browser: true }),
commonjs({
include: 'node_modules/**',
exclude: 'node_modules/rollup-plugin-node-globals/**',
ignoreGlobal: false,
sourceMap: true,
main: true,
browser: true
}),
json(),
buble()
]
}).then((bundle) => {
return bundle.write({
format: 'iife',
name: file.split('.')[-2],
file: `./public/javascripts/${file}`
})
}).catch( (e) => console.log(e) )
})
})
})
Now, you can just return an array of objects from rollup.config.js.
So if you
need to compile a single file, return the object export default {...}
need to compile multiple files, return list of objects export default [{...},{...},{...}, ...]
Look here for inspiration
cheatsheet
You can now use https://github.com/alfredosalzillo/rollup-plugin-multi-input, it also preserve directory tree in output dir.
import multiInput from 'rollup-plugin-multi-input';
export default {
input: ['src/**/*.js'],
experimentalCodeSplitting: true,
output: {
format: 'esm',
dir: 'dist'
},
plugins: [ multiInput() ],
};
Currently with these lines of code I am minifying my project.
gulp.task('minify-js', function() {
gulp.src('js/*.js')
.pipe($.uglify())
.pipe(gulp.dest('./_build/'));
});
gulp.task('minify-css', function() {
gulp.src(['./css/**/*.css'])
.pipe($.rename({suffix: '.min'}))
.pipe($.minifyCss({keepBreaks:true}))
.pipe(gulp.dest('./css/'))
.pipe(gulp.dest('./_build/css/'));
});
gulp.task('minify-html', function() {
var opts = {
comments: true,
spare: true,
conditionals: true
};
gulp.src('./*.html')
.pipe($.minifyHtml(opts))
.pipe(gulp.dest('./_build/'));
});
gulp.task('fonts', function() {
gulp.src('./fonts/**/*.{ttf,woff,eof,eot,svg}')
.pipe($.changed('./_build/fonts'))
.pipe(gulp.dest('./_build/fonts'));
});
gulp.task('server', function(done) {
return browserSync({
server: {
baseDir: './'
}
}, done);
});
gulp.task('server-build', function(done) {
return browserSync({
server: {
baseDir: './_build/'
}
}, done);
});
gulp.task('clean:build', function (cb) {
del([
'./_build/'
// if we don't want to clean any file we can use negate pattern
//'!dist/mobile/deploy.json'
], cb);
});
require('events').EventEmitter.prototype._maxListeners = 100;
gulp.task('usemin', function() {
return gulp.src('./index.html')
// add templates path
.pipe($.htmlReplace({
'templates': '<script type="text/javascript" src="js/templates.js"></script>'
}))
.pipe($.usemin({
css: [$.minifyCss(), 'concat'],
libs: [$.uglify()],
nonangularlibs: [$.uglify()],
angularlibs: [$.uglify()],
controllers:[$.uglify()],
contservicesapp:[$.uglify()],
services:[$.uglify()],
appcomponents: [$.uglify()],
mainapp: [$.uglify()],
templates:[$.uglify()],
directives:[$.uglify()]
}))
.pipe(gulp.dest('./_build/'));
});
When I minify it, it is inside a folder called "_build". Inside the _build folder I have a file called "cv.pdf". I have added it to this folder because when I minify it is not included. I would like that when the project is minified my file "cv.pdf" is not deleted.
How can I do it?
Try this:
gulp.task('clean:build', function (cb) {
del([
'./_build/**',
'!./_build',
'!./_build/cv.pdf'
], cb);
});
Adapted from del: excluding a file from a directory from deletion. Which explains how to delete an entire directory except for one file. This is probably the easiest way, you could also only specifically include only css, js, html, fonts and images if the above code doesn't work. Let me know.
I'm trying to minify and then create a copy without the "src." part of every index.src.php file inside any folder so I still have index.src.php available but a minified copy index.php:
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename(function(path){
path.basename = path.basename.replace('min\.', '');
}))
.pipe(gulp.dest('.'));
});
... so far this only literally renames the index.src.php into index.php
gulp-rename was easier than expected...
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename({
basename: 'index'
}))
.pipe(gulp.dest('.'));
});
I am writing a gulp task that goes through several folders and watches for less files. I want to pipe the compiled css back to the same folder the less file came from. Unfortunately, I can't seem to find a good way to give each of the files a separate output folder.
gulp.task('less:watch', function() {
watch({
glob: 'src/**/less/**/*.less',
emit: 'one',
emitOnGlob: false
},function(files){
return files
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
// I need to pipe the files back to the folder they were generated from
.pipe(gulp.dest(path.join(__dirname, 'less')))
.on('error', gutil.log);
});
});
I believe you can process one file at a time with gulp.watch:
gulp.task('less:watch', function() {
gulp.watch('src/**/less/**/*.less',function(evnt) {
return gulp.src(evnt.path)
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(path.dirname(evnt.path)))
.on('error', gutil.log);
});
});