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.
Related
I am new to gulp so i don't know as much good gulp plugins. I wrote a code for minifying js, css and html using gulp and its plugins which is working fine. But now i am stuck in unminifying code. I don't know which plugins to use which can easily unminify code.
guplfile.js:
var gulp = require('gulp'),
uglify = require('gulp-uglify')
htmlmin = require('gulp-html-minifier')
csso = require('gulp-csso');
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
gulp.task('min_html', function () {
gulp.src('app/**/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('min'))
});
gulp.task('min_css', function () {
gulp.src('app/**/*.css')
.pipe(csso())
.pipe(gulp.dest('min'))
});
gulp.task('minify_all', ['min_js', 'min_html', 'min_css']);
//pending
//gulp.task('unminify',[]);
Uglifying/Minifying is attended for production, you should not uglify your code while you are developing (except for testing purpose).
When you start gulp tasks, you have to make sure that you have in one part your "working code", that you will transform into a "destination code".
When you are doing this :
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
The code on which you are working on is in the app folder, and your transformed code is in the min folder (it's the destination folder).
But, if the min directory is also used in development, just disable the uglify task in development (easier to debug a not-uglifyied file).
There is no need to un-minify your sources, there are still present in app folder.
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 the following folder structure within a solution that I have inherited
.\gulp.config.js
.\gulpfile.js
.\.jscsrc
.\.jshintrc
.\default.js
.\Resources\js\main.js
.\Resources\js\modules\ various user created js files
.\Resources\js\vendor\ various js files i.e jQuery
I have installed gulp-jscs and gulp-jshint.
The .jscsrc I have taken from https://github.com/johnpapa/pluralsight-gulp/blob/master/.jscsrc.
I have the following within gulpfile.js:
'use strict'
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
gulp.task('verifyJS',function(){
gulp.src([
'./Resources/**/*.js',
'./*.js'
])
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', { verbose: true }));
});
I am trying to update the excludeFiles within .jscsrc to exclude the following:
.\default.js
.\resources\js\vendor
This is what I have tried:
"excludeFiles": [
"node_modules/**",
"bower_components/**",
"Resources/js/vendor/**", // vendor supplied files. ie jQuery
"./Resources/js/vendor/**",
"default.js",
"/default.js",
"./default.js",
],
I have included all the combinations that I have tried.
But when i run gulp verifyJS it is still including the files that I want to exclude.
How do I correctly set excludeFiles to exclude the file within the root of the project and the subfolder with all subsequent files and folders?
gulp-jshint doesn't care what's in your .jscsrc since that is the config file for gulp-jscs. You need a .jshintignore file instead.
Here's how to ignore your vendor files in both gulp-jscs and gulp-jshint:
.jscsrc
"excludeFiles": [
"node_modules/**",
"bower_components/**",
"Resources/js/vendor/**",
"default.js",
],
.jshintignore
node_modules/**
bower_components/**
Resources/js/vendor/**
default.js
gulpfile.js
gulp.task('verifyJS', function(){
return gulp.src([
'./Resources/**/*.js',
'./*.js'
])
.pipe(jscs())
.pipe(jscs.reporter()) // you forgot this
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', { verbose: true }));
});
I'm trying to create a gulpfile that allows me to compile scss and js files.
Calling webpack from a gulp task seems to work as expected (simply followed the webpack-stream intro.
However, I'm failing setting up watching for files. It's working as expected for scss files, but not for webpack compilation. It occurs once at launch, block the console, but does not recompile files.
Here is my gulpfile:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var webpackConfig = require('./webpack.config.js');
var webpack = require('webpack-stream');
gulp.task('default', function () {
// place code for your default task here
});
gulp.task('watch', ['sass:watch','webpack:watch']);
gulp.task('sass', function () {
return gulp.src('./Styles/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write(".",{ ext: '.map' }))
.pipe(gulp.dest('./wwwroot/styles'));
});
gulp.task('sass:watch', function () {
gulp.watch('./Styles/**/*.scss', ['sass']);
});
gulp.task('webpack', function(){
return gulp.src('App/entry.js')
.pipe(webpack( webpackConfig ))
.pipe(gulp.dest('./'));
});
gulp.task('webpack:watch', function(){
var watch = Object.create(webpackConfig);
watch.watch = true;
return gulp.src('App/entry.js')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./'));
});
When I run gulp watch, I get this output:
c:\Data\projets\someproject>gulp watch
[13:30:18] Using gulpfile c:\Data\projets\someproject\gulpfile.js
[13:30:18] Starting 'sass:watch'...
[13:30:18] Finished 'sass:watch' after 13 ms
[13:30:18] Starting 'webpack:watch'...
[13:30:22] Version: webpack 1.12.13
Asset Size Chunks Chunk Names
./wwwroot/dist/bundle.js 498 kB 0 [emitted] main
./wwwroot/dist/bundle.js.map 616 kB 0 [emitted] main
[13:30:22] Finished 'webpack:watch' after 3.92 s
[13:30:22] Starting 'watch'...
[13:30:22] Finished 'watch' after 11 µs
However, even if the console does not returns to the prompt, no bundle file is updated, if I update my sources.
I don't believe the issue is in my webpack.config.js file. If I run webpack --watch --color --progress in the prompt, I see the recompilation of bundle whenever a file is modified.
Thanks for clarification, I'm learning javascript ecosystem the hard way :)
In your console output, you should get 'webpack is watching for changes' if you do everything correctly. You have set watch.watch to true, but in the next step you have referenced to the old webpackConfig, for which the watch parameter is not true. You should use:
return gulp.src('App/entry.js')
.pipe(webpack(watch))
.pipe(gulp.dest('./'));
It worked after this change and the gulp watch polls for both the changes. You will also see in your console 'webpack is watching for changes'.
I hope this solves the issue.
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.