So i have a gulp config that concats all my angular files into one.
Here is the relevant bits in question
const jsPaths = [
'src/js/**/*.js', // no more than 100 files
'node_modules/angular-google-places-autocomplete/src/autocomplete.js',
'node_modules/angular-foundation-6/dist/angular-foundation.js',
'node_modules/angular-slugify/angular-slugify.js',
'node_modules/satellizer/satellizer.js',
'node_modules/angular-toastr/dist/angular-toastr.tpls.js',
'node_modules/angular-filter/dist/angular-filter.js'
]
gulp.task('jsbundle', function(done){
jsbundle(done)
})
gulp.task('js', ['jsbundle'], function(){
transpileJs()
})
function jsbundle(done){
gulp.src(jsPaths)
.pipe(concat('concat.js'))
.pipe(gulp.dest('tmp'))
.on('end', function() {
done();
});
}
Finished 'jsbundle' after 5.04 s
The finished file is about 1.5mb
Is there anything i can do to speed this up?
You can easily minify it with uglify.
Start by installing uglify and rename:
npm install -rename gulp-uglify --save-dev
And add:
`function jsbundle(done){
gulp.src(jsPaths)
.pipe(concat('concat.js'))
.pipe(gulp.dest('tmp'))
.pipe(rename('concat.min.js'))
.pipe(uglify())
.pipe(gulp.dest('tmp'));
.on('end', function() {
done();
});
}`
Related
I've come from Grunt to Gulp. Good so far but i can't seem to get the Sass errors to show on the site. Curently it stops the whole gulp task and i only get an error in Terminal
With Grunt the errors appreared immediately on the local site in a css content property. I liked this much better, much easier to use. Any ideas? Thanks.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy:"dummy.com"
});
gulp.watch("craft/web/sass/*.scss", ['sass']);
gulp.watch("craft/templates/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("craft/web/sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("craft/web/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I`m trying to create a valid Source Map with Gulp and gulp-sourcemaps. The Source Map is actually created, but inside, the "sources" parameter is not loading the appropriate paths of my SASS files. This is what I get:
"version":3,"file":"style.css","sources":["style.css"]
When I need to load something like this (created by Koala App):
"version":3,"file":"style.css","sources": ["../sass/style.scss","../sass/typography/_fonts.scss","../sass/helpers/_variables.scss"........
This is my Gulp Task
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sass(
{
'outputStyle': 'expanded'
}
))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.')
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
Thanks for the time.
The sourcemaps.init() must go before the sass pipe, so:
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass( {
'outputStyle': 'expanded'
}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
See gulp-sass with sourcemaps.
You have two sass calls for some reason, get rid of the first and put its options into the second sass pipe call.
I need to run jekyll build during gulp watch task and I did that as per the following code.
var gulp = require('gulp-help')(require('gulp')),
sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('jekyll-build', function (done) {
return cp.spawn(jekyll, ['build'], {stdio: 'inherit'})
.on('close', done);
});
gulp.task('default', ['sass'], function(){
gulp.watch(['_includes/**/*.js', '_includes/**/*._', 'assets/styles/**/*.scss'], ['jekyll-build', 'sass']);
});
When I make some changes in any file and try to save at once, command runs in terminal but it is not getting reflected in UI. I need to save twice or thrice to get the changes reflected. Not sure what's the issue or whether its the issue of the gulp watch code added here. Any help is appreciated.
When you say the changes are not reflected do you mean the browser is not refreshing?
The line to launch jekyll build is different for mac vs Windows, your looks like it is for a Mac, on Windows I use jekyll.bat on this line (jekyll, ['build'].
In your watch step you are not watching very much. Rather than try to tell gulp to watch every different thing I do the opposite and tell gulp to watch everything **/*.* and then tell it what not to watch like !_site/**/*. This also lets you watch the config file for changes.
Also, it doesn't look like you are live-reloading with browser sync, that is half the fun of using gulp with jekyll (other half is having gulp do sass processing as it is much faster than jekyll).
Here is a gulp file that I use and a link to a write up I did about it:
https://rdyar.github.io/2017/10/01/speed-up-jekyll-by-using-gulp-for-sass-and-other-assets/
var gulp = require('gulp');
var browserSync = require('browser-sync');
var cp = require('child_process');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var cssnano = require('cssnano');
var imagemin = require('gulp-imagemin');
var htmlhint = require("gulp-htmlhint");
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
// Gulp as asset manager for jekyll. Please note that the assets folder is never cleaned
//so you might want to manually delete the _site/assets folder once in a while.
// this is because gulp will move files from the assets directory to _site/assets,
// but it will not remove them from _site/assets if you remove them from assets.
/**
* Build the Jekyll Site - for windos. If you are on a Mac/linux change jekyll.bat to just jekyll
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload when watched files change
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('serve', ['jekyll-build'], function() {
browserSync.init({
server: "_site/"
});
});
/**
* Watch jekyll source files for changes, don't watch assets
*/
gulp.task('watch', function () {
gulp.watch(['**/*.*', '!_site/**/*','!_assets/**/*','!node_modules/**/*','!.sass-cache/**/*' ], ['jekyll-rebuild']);
});
//watch just the sass files - no need to rebuild jekyll
gulp.task('watch-sass', ['sass-rebuild'], function() {
gulp.watch(['_assets/sass/**/*.scss'], ['sass-rebuild']);
});
// watch just the js files
gulp.task('watch-js', ['js-rebuild'], function() {
gulp.watch(['_assets/js/**/*.js'], ['js-rebuild']);
});
// watch just the image files
gulp.task('watch-images', ['images-rebuild'], function() {
gulp.watch(['_assets/img/**/*.*'], ['images-rebuild']);
});
//if sass files change just rebuild them with gulp-sass and what not
gulp.task('sass-rebuild', function() {
var plugins = [
autoprefixer({browsers: ['last 2 version']}),
cssnano()
];
return gulp.src('_assets/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe( gulp.dest('_site/assets/css/') )
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('js-rebuild', function(cb) {
return gulp.src('_assets/js/**/*.js')
.pipe(uglify())
.pipe( gulp.dest('_site/assets/js/') )
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('images-rebuild', function(cb) {
return gulp.src('_assets/img/**/*.*')
.pipe( gulp.dest('_site/assets/img/') )
.pipe(browserSync.reload({
stream: true
}))
});
/**
* Default task, running just `gulp` will
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['serve', 'watch','watch-sass','watch-js','watch-images']);
//build and deploy stuff
gulp.task('imagemin', function() {
console.log('Minimizing images in source!!');
return gulp.src('_assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
gulp.task('w3', function() {
gulp.src("_site/**/*.html")
.pipe(htmlhint())
.pipe(htmlhint.reporter())
})
// validate from the command line instead, works better
// npm install htmlhint -g
// htmlhint _site/**/*.html
I have downloaded AngularJS setup for PhoneGap from this tutorial.
Now I would like to use Sass instead of Less (since that's what I'm using in the project I am porting to PhoneGap). The default Less task looks like this:
gulp.task('less', function () {
return gulp.src(config.less.src).pipe(less({
paths: config.less.paths.map(function(p){
return path.resolve(__dirname, p);
})
}))
.pipe(mobilizer('app.css', {
'app.css': {
hover: 'exclude',
screens: ['0px']
},
'hover.css': {
hover: 'only',
screens: ['0px']
}
}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(path.join(config.dest, 'css')));
});
I've tried this Gulp task for Sass:
gulp.task('sass', function(){
return gulp.src('./src/sass/css/main.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('./src/css/'));
});
Nothing seems to be happening (cannot see a newly generated main.scss file). Could someone help (I haven't been using Gulp before as you can probably guess. I've read through this though..)
UPDATE:
I am not actually replacing the Less task, I am just adding another task for Sass.
UPDATE 2:
I am calling the Sass task in here
gulp.task('watch', function () {
if(typeof config.server === 'object') {
gulp.watch([config.dest + '/**/*'], ['livereload']);
}
gulp.watch(['./src/html/**/*'], ['html']);
gulp.watch(['./src/sass/css/*'], ['sass']);
gulp.watch(['./src/js/**/*', './src/templates/**/*', config.vendor.js], ['js']);
gulp.watch(['./src/images/**/*'], ['images']);
});
However the problem seems to be that it's not executed.
UPDATE 3:
Here's the build phase code
gulp.task('build', function(done) {
var tasks = ['html', 'fonts', 'images', 'sass', 'js'];
seq('clean', tasks, done);
});
Your path is absolute, not relative. Don't forget the dots ;)
gulp.task('sass', function(){
return gulp.src('./src/sass/css/main.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'));
});
I'm new to Gulp and I wanted to make use of its automatic scss compiling and browser sync. But I can't get it to work.
I stripped everything down to leave only the contents of the example on the Browsersync website:
http://www.browsersync.io/docs/gulp/#gulp-sass-css
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I can call gulp serve. The site is showing and I get a message from Browsersync. When I modify the HTML, the page is reloaded. When however I modify the scss, I can see this:
[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms
but I have to reload manually. What am I missing?
I also faced a similar problem when I was new to browser-sync usage, the command-line was saying "reloading browsers" but the browser was not refreshed at all, the problem was I had not included body tag in my HTML page where the browser-sync can inject script for its functionality, make sure your HTML page has body tag.
You can just inject the changes instead of having to force a full browser refresh on SASS compile if you like.
browserSync.init({
injectChanges: true,
server: "./app"
});
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream({match: '**/*.css'}));
});
This is because you're calling browserSync.reload on the html watch and not on the scss watch.
Try this:
gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);
This is what I use and it work's fine in sass or any other files
gulp.task('browser-sync', function () {
var files = [
'*.html',
'css/**/*.css',
'js/**/*.js',
'sass/**/*.scss'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
I include this on my html, right below the body tag. It works.
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]>
</script>
Ran into this same problem trying to reload php and js files and stream css files. I was able to use stream only by using a pipe method, which makes sense. Anyway, here's what worked for me:
gulp.watch(['./**/*.css']).on('change', function (e) {
return gulp.src( e.path )
.pipe( browserSync.stream() );
});
But, I actually prefer #pixie's answer modified:
gulp.task('default', function() {
var files = [
'./**/*'
];
browserSync.init({
files : files,
proxy : 'localhost',
watchOptions : {
ignored : 'node_modules/*',
ignoreInitial : true
}
});
});
I also had the same issue. It worked when I called the reload method as a separate task.
gulp.task('browserSync', function() {
browserSync.init(null, {
server: {
baseDir: './'
},
});
})
gulp.task('reload', function(){
browserSync.reload()
})
gulp.task('watch', ['sass', 'css', 'browserSync'], function(){
gulp.watch('*.html', ['reload']);
})
Sometimes when using the CLI you don't have the script inserted in your HTML main files so you should manually add this or use gulp.
<!-- START: BrowserSync Reloading -->
<script type='text/javascript' id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<!-- END: BrowserSync Reloading -->