Skip to content

Commit

Permalink
Add images support with imagemin
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pierstoval
Pierstoval committed May 31, 2016
1 parent aa20133 commit a722b64
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 52 deletions.
5 changes: 4 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,16 @@ This is a sample of Gulpfile to be used with config instead of "re-developing" m
* Options:
* `--prod` If specified, will run clean-css and uglyfyjs when dumping the assets.
* Gulp commands:
* `images` Dumps the sources in the `config.images` parameter from image files.
* `less` Dumps the sources in the `config.less` parameter from LESS files.
* `sass` Dumps the sources in the `config.sass` parameter from SCSS files.
* `css` Dumps the sources in the `config.css` parameter from plain CSS files.
* `js` Dumps the sources in the `config.js` parameter from plain JS files.
* `dump` Executes all the above commands.
* `watch` Executes 'dump', then watch all sources, and dump all assets once any file
* `watch` Executes `dump`, then watches all sources, and dump all assets once any file
is updated.
* Logs: when you run a command, there are plenty of `console` calls that log things that happen,
which allow you to know what is happening, what files are managed, updated. All with time info.

## Install

Expand Down
162 changes: 111 additions & 51 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,79 @@
/*
There here is YOUR config
This var is an exemple of the assets you can use in your own application.
The array KEYS correspond to the OUTPUT files,
This var is an example of the assets you can use in your own application.
The array KEYS correspond to the OUTPUT files/directories,
The array VALUES contain a LIST OF SOURCE FILES
*/
var config = {

// The base output directory for all your assets
"output_directory": "web",

/**
* Here you can add other files to watch when using "gulp watch".
* They will automatically run the "dump" command when modified.
* It is VERY useful when you use massively less/sass "import" rules, for example.
* Example:
"src/AppBundle/Resources/public/less/*.less"
*/
"files_to_watch": [
/**
* Here you can add other files to watch when using "gulp watch".
* They will automatically run the "dump" command when modified.
* It is VERY useful when you use massively less/sass "import" rules, for example.
* Example:
"src/AppBundle/Resources/public/less/*.less"
*/
],

/**
* All files here are images that will be optimized/compressed with imagemin.
* The key corresponds to the output directory (prepended with "output_directory" previous option).
* Example:
"images/": [
"src/AppBundle/Resources/public/images/*"
]
*/
"images": {
},

/**
* All files from this section are parsed with LESS plugin and dumped into a CSS file.
* If using "--prod" in command line, will minify with "clean-css".
* Example:
"css/main_less.css": [
"web/components/bootstrap/less/bootstrap.less",
"src/AppBundle/Resources/public/less/main.less"
]
*/
"less": {
/**
* All files from this section are parsed with LESS plugin and dumped into a CSS file.
* If using "--prod" in command line, will minify with "clean-css".
* Example:
"css/main_less.css": [
"web/components/bootstrap/less/bootstrap.less",
"src/AppBundle/Resources/public/less/main.less"
]
*/
},

/**
* All files from this section are parsed with SASS plugin and dumped into a CSS file.
* If using "--prod" in command line, will minify with "clean-css".
* Example:
"css/main_sass.css": [
"src/AppBundle/Resources/public/less/main.scss"
]
*/
"sass": {
/**
* All files from this section are parsed with SASS plugin and dumped into a CSS file.
* If using "--prod" in command line, will minify with "clean-css".
* Example:
"css/main_sass.css": [
"src/AppBundle/Resources/public/less/main.scss"
]
*/
},

/**
* All files from this section are just concatenated and dumped into a CSS file.
* If using "--prod" in command line, will minify with "clean-css".
* Example:
"css/main.css": [
"src/AppBundle/Resources/public/css/main.css"
]
*/
"css": {
/**
* All files from this section are just concatenated and dumped into a CSS file.
* If using "--prod" in command line, will minify with "clean-css".
* Example:
"css/main.css": [
"src/AppBundle/Resources/public/css/main.css"
]
*/
},

/**
* All files from this section are just concatenated and dumped into a JS file.
* If using "--prod" in command line, will minify with "uglyflyjs".
* Example:
"js/main.js": [
"web/components/bootstrap/dist/bootstrap-src.js",
"src/AppBundle/Resources/public/css/main.js"
]
*/
"js": {
/**
* All files from this section are just concatenated and dumped into a JS file.
* If using "--prod" in command line, will minify with "uglyflyjs".
* Example:
"js/main.js": [
"web/components/bootstrap/dist/bootstrap-src.js",
"src/AppBundle/Resources/public/css/main.js"
]
*/
}
};

Expand Down Expand Up @@ -87,21 +105,23 @@ Object.prototype.p_forEach = function(callback) {

/*************** Global vars ***************/

var isProd = process.argv.indexOf('--prod') >= 0,
hasLess = config.less.p_size() > 0,
hasSass = config.sass.p_size() > 0,
hasCss = config.css.p_size() > 0,
hasJs = config.js.p_size() > 0
var isProd = process.argv.indexOf('--prod') >= 0,
hasImages = config.images.p_size() > 0,
hasLess = config.less.p_size() > 0,
hasSass = config.sass.p_size() > 0,
hasCss = config.css.p_size() > 0,
hasJs = config.js.p_size() > 0
;

// Required extensions
var gulp = require('gulp'),
gulpif = require('gulp-if'),
watch = require('gulp-watch'),
less = require('gulp-less'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
concat = require('gulp-concat'),
uglyfly = require('gulp-uglyfly'),
imagemin = require('gulp-imagemin'),
cleancss = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer')
Expand Down Expand Up @@ -165,6 +185,35 @@ gulp.task('sass', function() {
}
});

/**
* Compress images.
* Thanks to @docteurklein.
*/
gulp.task('images', function() {
var list = config.images,
outputDir = config.output_directory+'/',
assets_output, assets, pipes, i, l
;
for (assets_output in list) {
if (!list.hasOwnProperty(assets_output)) { continue; }
assets = list[assets_output];
pipes = gulp
.src(assets)
.pipe(imagemin({
optimizationLevel: 7,
progressive: true,
interlaced: true
}))
.pipe(gulp.dest(outputDir + assets_output))
;

console.info(" [file+] "+assets_output+" >");
for (i = 0, l = assets.length; i < l; i++) {
console.info(" > "+assets[i]);
}
}
});

/**
* Dumps the CSS assets.
*/
Expand Down Expand Up @@ -223,17 +272,23 @@ gulp.task('js', function() {
*/
gulp.task('watch', ['dump'], function() {
var files_less = [],
files_images = [],
files_css = [],
files_sass = [],
files_js = [],
callback = function(event) {
console.log('File "' + event.path + '" updated');
},
other_files_to_watch = config.files_to_watch || [],
files_to_watch = [];
files_to_watch = []
;

console.info('Night gathers, and now my watch begins...');

config.images.p_forEach(function(key, images){
files_images.push(config.images[images]);
files_to_watch.push(config.images[images]);
});
config.less.p_forEach(function(key, less){
files_less.push(config.less[less]);
files_to_watch.push(config.less[less]);
Expand Down Expand Up @@ -261,6 +316,9 @@ gulp.task('watch', ['dump'], function() {
if (other_files_to_watch.length) {
gulp.watch(other_files_to_watch, ['dump']).on('change', callback);
}
if (hasImages) {
gulp.watch(files_less, ['less']).on('change', callback);
}
if (hasLess) {
gulp.watch(files_less, ['less']).on('change', callback);
}
Expand All @@ -279,6 +337,7 @@ gulp.task('watch', ['dump'], function() {
* Runs all the needed commands to dump all assets and manifests
*/
var dumpTasks = [];
if (hasImages) { dumpTasks.push('images'); }
if (hasLess) { dumpTasks.push('less'); }
if (hasSass) { dumpTasks.push('sass'); }
if (hasCss) { dumpTasks.push('css'); }
Expand All @@ -296,12 +355,13 @@ gulp.task('default', function(){
console.info(" --prod If specified, will run clean-css and uglyfyjs when dumping the assets.");
console.info("");
console.info("Commands:");
console.info(" images Dumps the sources in the `config.images` parameter from image files.");
console.info(" less Dumps the sources in the `config.less` parameter from LESS files.");
console.info(" sass Dumps the sources in the `config.sass` parameter from SCSS files.");
console.info(" css Dumps the sources in the `config.css` parameter from plain CSS files.");
console.info(" js Dumps the sources in the `config.js` parameter from plain JS files.");
console.info(" dump Executes all the above commands.");
console.info(" watch Executes 'dump', then watch all sources, and dump all assets once any file is updated.");
console.info(" watch Executes 'dump', then watches all sources, and dumps all assets once any file is updated.");
console.info("");
});

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"gulp-watch": "^4.3",
"gulp-concat": "^2.6",
"gulp-uglyfly": "^1.4",
"gulp-imagemin": "^3.0",
"gulp-clean-css": "^2.0",
"gulp-sourcemaps": "^1.6",
"gulp-autoprefixer": "^3.1"
Expand Down

0 comments on commit a722b64

Please sign in to comment.