I have css and js files in a directory (and subdirectories). I'm looking into different tools to compress the assets in all the directories. I'm trying to find a way to get gulp to compress all the files in those directories and save the compressed file in the same directory and name it with the following convention: [name].min.css or [name].min.js. So example.js would become example.min.js.
Is there a way to achieve this?
I've read the following on this:
http://gulpjs.com/plugins/
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
https://github.com/gulpjs/gulp/blob/master/docs/API.md
You usually don't want to generate the minified files in the same directory as the original files. You write all files that are generated by your build script to a single output directory. Some advantages of this approach are:
Makes it easier to clean the build and recreate everything from scratch: you just delete that one output folder.
You don't have to worry about generated files accidentally getting picked up by your build and getting processed again.
But since you asked, here's a solution that creates the minified files in the same directory as the original files. This creates a .min.css and .min.js file for every .css and .js file. All CSS files are assumed to be in a directory called css (or its subdirectories) and all JS files are assumed to be in a directory called js (or its subdirectories):
var gulp = require('gulp');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
gulp.task('css', function () {
return gulp.src([
'css/**/*.css',
'!css/**/*.min.css',
])
.pipe(cssnano())
.pipe(rename(function(path) {
path.extname = ".min.css";
}))
.pipe(gulp.dest('css'));
});
gulp.task('js', function () {
return gulp.src([
'js/**/*.js',
'!js/**/*.min.js',
])
.pipe(uglify())
.pipe(rename(function(path) {
path.extname = ".min.js";
}))
.pipe(gulp.dest('js'));
});
gulp.task('default', ['css', 'js']);
Notice the negation pattern !css/**/*.min.css that is used to prevent the already minified CSS from getting minified again on the next build. Same for the JavaScript.
I used gulp-cssnano and gulp-uglify to minify the CSS and JS, but there's plenty of other options out there that can act as drop-in replacements.
Related
I am a newcomer to Gulp. I have a gulp file and I am running one task in it -
gulp.task('sass', function () {
return gulp.src('app/scss/**/.scss') // Get source files with gulp.src
.pipe(sass()) // Sends it through a gulp plugin
.pipe(gulp.dest('app/css')) // Outputs the file in the destination folder
});
in the above code what i want to do is:
I have four scss files in app/scss folder:
site1.scss
site2.scss
site3.scss
copy.scss
Now i want to run the sass task and have all the files in scss folder excuding one particular file 'copy.scss'. I don't want the 'copy.scss' file to be converted into css file.
How do I do it?
Any help would be apprecisted
Try
return gulp.src(['app/scss/**/*.scss', '!app/scss/**/copy.scss'])
Note the ! It allows you to negate or remove from the stream a file or files. Also note I added a * to your *.scss
I have following directory structure:
common
-services
--service1.js
--service2.js
-app
--gulpfile.js
--src
---services
----service1.js
----service3.js
I want to made gulp task that will take all files from common directory, take files from app directory and replace all files with same filenames in original stream. After that I will concat it and write to other directory.
I tried this:
var gulp = require('gulp'),
merge = require('gulp-merge'),
concat = require('gulp-concat');
gulp.task('templates', function () {
return merge(
gulp.src(['../common/**/*.js']),
gulp.src(['src/**/*.js'])
)
.pipe(concat('app.js'))
.pipe(gulp.dest('build/js'));
});
I expected to got content of common/services/service2.js, app/src/services/service1.js, app/src/services/service3.js in dest/app.js.
But instead I've got content of all files.
I tried to change cwd or base of gulp.src, but it has no effect.
I know that I can write this stream to tmp directory, and after that get files from it, but it seems not really like gulp-style solution. So how can I overwrite files with same file names in streams?
Ok, i can't find any existing solution for that, so I write my own gulp plugin: gulp-unique-files.
I want to copy a file /stubs/foo.txt in all the subdirectories of /something/, for example
/something/foo.txt
/something/else/foo.txt
I tried:
gulp.task('copy', function () {
return gulp.src('/stubs/foo.txt')
.pipe(gulp.dest('/something/**/*'));
});
But it seems Gulp does not support variable in the destination folder.
Not an ideal solution, but you could use multiple destination pipes.
Say I have these folders:
./
|
folder1/
|---file1.js
|---file2.js
folder2/
|---file1.js
|---file2.js
I want to run a task with gulp.src('./*/.js'), and I want them to be output as the following:
./
|
folder1/
|---file1.js
|---file2.js
|---file1.min.js
|---file2.min.js
folder2/
|---file1.js
|---file2.js
|---file1.min.js
|---file2.min.js
This really is something that you can solve by reading any one of a number of gulp articles already out there. Google for gulp tutorial and start reading articles.
By default, the relative source path for an input file is preserved through to the output file in gulp. You don't have to do anything special. If you want something similar to what you've got, you need to use a JS minifier, such as the gulp-uglify plugin, and the gulp-rename plugin.
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('src/**/*.js')
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(gulp.dest('dest/'));
});
The relative path is based on the first glob in the string, in the example above, it's the **, so the relative path would be any folders after src/. This means a file at src/foo/bar.js would be saved as dest/foo/bar.min.js, because the relative path is foo/.
I just started playing with gulp, and it's very fast and easy to use but it seems to have a critical flaw: what do you do when a task needs to output more than one type of file?
For example, gulp-less says it doesn't even support the sourceMapFilename option. I don't want my source map embedded in my CSS file. Am I hooped? Should I just go back to using Grunt, or is there a way to deal with this?
This task will take multiple files, do stuff to them, and output them along with source maps.
It will include the source code within the maps files by default, so you don't have to distribute the source code files too. This can be turned off by setting the includeContent option to false. See the gulp-sourcemaps NPM page for more source map options.
gulpfile.js:
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
gulp.task("test-multiple", function() {
return gulp.src("src/*.scss")
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer())
.pipe(plugins.sourcemaps.write("./"))
.pipe(gulp.dest("result"));
});
package.json
"gulp": "~3.8.6",
"gulp-load-plugins": "~0.5.3",
"gulp-sass": "~0.7.2",
"gulp-autoprefixer": "~0.0.8",
"gulp-sourcemaps": "~1.1.0"
The src directory:
first.scss
second.scss
The result directory after running the test-multiple task:
first.css
first.css.map // includes first.scss
second.css
second.css.map // includes second.scss
Gulp supports multiple output files fine. Please read the docs.
Example:
gulp.task('scripts', function () {
return gulp.src('app/*js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
This will read in a bunch of JS files, minify them and output them to the dist folder.
As for the gulp-less issue. You could comment on the relevant ticket.
In the docs it shows you how to have multiple output files:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())`
.pipe(gulp.dest('./build/minified_templates'));