Hello I have the following gulpfile.js:
'use strict';
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
sass = require('gulp-ruby-sass'),
compass = require('gulp-compass'),
gutil = require('gulp-util'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
templateCache = require('gulp-angular-templatecache'),
path = require('path');
/* Default Gulp Task */
gulp.task('default', ['sass', 'mfb-sass', 'bower-css', 'bower-js', 'app-js', 'ng-templates'], function () {
return gutil.log('Gulp is running!')
});
/* Build SASS files */
gulp.task('sass', function () {
return gulp.src('./src/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(compass({
project: path.join(__dirname, '/'),
css: 'dist/css',
sass: 'src/sass'
}))
.pipe(sourcemaps.write())
.pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
.pipe(gulp.dest('./dist/css'));
});
gulp.task('mfb-sass', () =>
sass('bower_components/ng-material-floating-button/mfb/src/*.scss')
.on('error', sass.logError)
.pipe(gulp.dest('bower_components/ng-material-floating-button/mfb/dist'))
);
/* Build and Compreess Bower CSS Files */
gulp.task('bower-css', function () {
return gulp.src([
'bower_components/bootstrap/dist/css/bootstrap.min.css',
'bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.min.css',
'bower_components/bootstrap-material-design/dist/css/ripples.min.css',
'bower_components/angular-loading-bar/src/loading-bar.css',
'bower_components/snapjs/snap.css',
'bower_components/angular-snap/angular-snap.min.css',
'bower_components/font-awesome/css/font-awesome.min.css',
'bower_components/animate.css/animate.min.css',
'bower_components/ngAnimate/css/ng-animation.css',
'bower_components/angular-material/angular-material.css',
'bower_components/Ionicons/css/ionicons.css',
'bower_components/ng-material-floating-button/mfb/dist/mfb.css',
])
//only uglify if gulp is ran with '--type production'
.pipe(concat('bower.css'))
.pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
.pipe(gulp.dest('dist/css'));
});
/* Build and Compreess Bower Javascript Files */
gulp.task('bower-js', function () {
return gulp.src([
'bower_components/jquery/dist/jquery.js',
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/angular/angular.js',
'bower_components/bootstrap-material-design/dist/js/material.js',
'bower_components/bootstrap-material-design/dist/js/ripples.min.js',
'bower_components/angular-ui-router/release/angular-ui-router.min.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-loading-bar/src/loading-bar.js',
'bower_components/oclazyload/dist/ocLazyLoad.min.js',
'bower_components/satellizer/satellizer.js',
'bower_components/snapjs/snap.min.js',
'bower_components/angular-snap/angular-snap.min.js',
'bower_components/ngSlimscroll/src/js/ngSlimscroll.js',
'bower_components/angular-animate/angular-animate.min.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'bower_components/angular-aria/angular-aria.js',
'bower_components/angular-material/angular-material.js',
'bower_components/ng-material-floating-button/src/mfb-directive.js',
'bower_components/humanize-duration/humanize-duration.js',
'bower_components/moment/min/moment-with-locales.js',
'bower_components/angular-timer/dist/angular-timer.js',
'bower_components/angular-fullscreen/src/angular-fullscreen.js',
'bower_components/angular-translate/angular-translate.js'
])
.pipe(sourcemaps.init())
.pipe(concat('bower.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'));
});
/* Build and Compress App Javascript Files */
gulp.task('app-js', function () {
return gulp.src([
'src/js/core/app.js',
'src/js/core/controllers.js',
'src/js/core/services.js',
'src/js/core/templates.js',
'src/js/core/directives.js',
'src/js/core/routes.js',
'src/js/**/*.js'
])
.pipe(sourcemaps.init())
.pipe(concat('app.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'));
});
/* Caching all GTML Views */
gulp.task('ng-templates', function () {
return gulp.src('src/views/**/*.html')
.pipe(templateCache({
filename: 'templates.js',
root: 'tpls/',
module: 'app.tpls'
}))
.pipe(gulp.dest('dist/js'));
});
I am able to build my project with this however I keep getting a weird output, for my bower.js file the total size after build is 12,836 KB. I did not understand this because I noticed my browser seems to use up a lot of memory whenever I run the app, so I decided to calculate the total size of all the files that had been concatenated in my bower.js file and what I had at the end was 3,574 KB.
Right now I am wondering what is going on, are some hidden files being included during the build process, is there a way for me to display an output of all files that were joined together and uglified and the size of each file in gulp?
Is it possible that one of my JS files is loading external scripts?
The total size of my bower_components folder is 25.3 MB (29.8 MB on disk).
When I run just "gulp" the file size is 9,225 KB which is smaller, however when I run "gulp --type production" to uglify the scripts the file size increases to 12,836 KB instead.
You're embedding your source maps in the resulting bower.js. That's what's making the file so large.
If you open the resulting bower.js and look at the very end of the file you should find a line that starts like this
//# sourceMappingURL=data:application/json;base64,
Everything after that specifies the mapping from your source files to the concatenated and uglified bower.js file.
That's the reason why your production build is so much larger than your development build. Your production build uglifies the concatenated files, so there is a lot more to map from your source files to the resulting bower.js file. Your development build on the other hand doesn't have to map very much. The resulting bower.js is just all your source files concatenated into one big file.
Luckily there's another way to include source maps. You can generate them into a separate file by specifying a destination directory in sourcemaps.write():
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
This creates a file bower.js.map in the same directory as bower.js. The .map file is also referenced in bower.js:
//# sourceMappingURL=bower.js.map
The browser will only load the bower.js.map file if you are debugging the code in bower.js, so memory usage shouldn't go up unless you're actually debugging.
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.
I need to write a gulp task that will only compile those Typescript files that have actually changed and came up with this:
var gulp = require('gulp');
var print = require('gulp-print');
var newer = require('gulp-newer');
var ts = require('gulp-typescript');
gulp.task('compile:ts', function () {
return gulp.src([
'typings/browser.d.ts',
'app/**/*.ts'
])
.pipe(newer('app'))
.pipe(print(function (filepath) {
return 'Compiling ' + filepath + '...';
}))
.pipe(ts({
target: 'es5',
module: 'commonjs',
moduleResolution: 'node',
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
removeComments: false,
noImplicitAny: false
}))
.pipe(gulp.dest('app'));
});
However, this task doesn't find any modified files although there are .ts files with more recent timestamps than their .js counterpart.
Where did I go wrong?
However, this task doesn't find any modified files although there are .ts files with more recent timestamps than their .js counterpart.
That's because you're not telling gulp-newer to compare .ts files with .js files. You're comparing .ts files with themselves, so there is no change to be detected.
You need to tell gulp-newer to compare each .ts file with its .js counterpart:
.pipe(newer({dest:'app',ext:'.js'}))
There is an easier method of compiling files when they change. Using gulp watch, you can run the function once and whenever you save a change, it'll run the compiling function.
gulp.task('watch', function() {
gulp.watch(['ts/filepaths','more/ts/filepaths'],
['compile:ts','otherFunctionsIfNeeded']);
});
If you rewrite compile:ts to only compile, using the function above, whenever you save a ts file, it will compile it for you
I have a gulp task to uglify my JS:
gulp.task('uglify', ['eslint'], () => {
return gulp.src(jsDest + '/*.js')
.pipe(rename({suffix: '.min'}))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest(jsDest));
});
It works fine, but as I am using a wildcard to identify JS files, I end up with new files named name.min.min.js rather than existing minified files being overwritten.
A work around I have come up with is to have an additional task which cleans out these files before I uglify again:
gulp.task('cleanUglified', () => {
return del.sync('dist/js/*.min.js');
});
gulp.task('uglify', ['cleanUglified', 'eslint'], () => {
...
});
While this works fine, I'm sure there must be a way to have my task ignore anything named *.min* and in fact overwrite any that already exist.
Solved - I can ignore the already minified files and overwrite them by using this pattern to select the files to uglify:
return gulp.src(jsDest + '/*[^.min].js')
EDIT
Following the below comments, I have updated to:
return gulp.src(['*.js', '!*.min.js'])
I'm trying to use these two gulp plugins together:
gulp-html-minifier
gulp-inject-stringified-html
Or put differently, I'm trying to inject the contents of files containing html fragments into my javascript files after they're minified.
When I'm trying to run a straight up gulp build I get this:
Error: ENOENT: no such file or directory, open 'C:\path\to\.temp\template.html'
Here's a repro of my situation. My folder structure:
/src/app.js
/src/template.html
/gulpfile.js
/package.json
My gulpfile.js:
var gulp = require('gulp');
var injectHtml = require('gulp-inject-stringified-html');
var htmlmin = require('gulp-html-minifier');
gulp.task('minify', [], function() {
gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
gulp.task('default', ['minify'], function() {
gulp.src('src/*.js')
.pipe(injectHtml())
.pipe(gulp.dest('.build'));
});
The template.html file:
<div>My Template</div>
The app.js file:
var html = { gulp_inject: "../.temp/template.html" };
Now, if I run minify manually first, things will work as expected. From this I speculate I'm not using Gulp correctly. I reckon I'd need to pipe the result of htmlmin into the injectHtml method. But I fail to see how.
How can I get these two plugins to play together nicely?
You are missing a return in the minify task. It should look like that:
gulp.task('minify', [], function() {
return gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
Without return, the default task doesn't have any way to know that minify finished, so it may start before the minified html file was created.