DEV Community: Zara

Learning Gulp

Zara — Tue, 07 Apr 2020 18:11:20 +0000

I have used Gulp for a while but I have never really understood everything in the gulpfile - it just seemed like magic to me. I have always just used examples from others and tweaked what I needed to get it to work. Which has been fine, but I decided that I want to learn it properly so for my personal website, I wrote my own gulpfile.

I have only used Gulp 3 before so I wanted learn Gulp 4. I googled my way through it all, I learned which plugins to use for what cause and how to write up my tasks. There are TONS of resources if you google gulp 4 setup but I made sure I wasn't just copying and pasting. I want to understand each line of code in my file.

My personal website is in HTML with Sass so I wrote a gulpfile for my needs right now. I want to compile my Sass, add source maps and have a better, easier workflow.

BrowserSync

Here is how to setup BrowserSync with gulp: BrowserSync docs

Styles

What I wanted

Compile Sass to CSS
Add source maps
Minify my CSS file
Use BrowserSync to see changes straight away.

Packages used

const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();

The code

function style() {
    return gulp.src('./assets/scss/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./assets/css'))
        .pipe(browserSync.stream())
}

What this method does

When we do gulp.src('./assets/scss/main.scss'), it creates a node stream and reads our file. We can then use our plugins in .pipe methods to change the file how we like it until we save it to the final destination using .pipe(gulp.dest('./assets/css')).

The plugins

sourcemaps.init(): Initialise Source Maps - package gulp-sourcemaps.

sass().on('error', sass.logError): Compile my Sass to CSS - package gulp-sass

cleanCSS(): Minify my CSS - package gulp-clean-css. I started with uglify-css but noticed (after some debugging) that it broke my source maps! It basically removed the /*# sourceMappingURL=main.css.map */ part once minified, but this package does not.

sourcemaps.write('.'): Writes my source maps, ('.') meaning the same directory so it sits next to my main.css file.

browserSync.stream(): This is my favourite part and I just learned about this! Instead of using browserSync.reload(), this "injects" the css without doing a page refresh. So you see your style changes straight away - it's beautiful. We need to run this after gulp.dest() so that the css file has been written.

Watch

What I wanted

Notice when a .html or .scss file has changed
Run BrowserSync and reload browser if necessary.

Packages used

const browserSync = require('browser-sync').create();

The code

function watch() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch('./assets/scss/*.scss', style);
    gulp.watch('./**/*.html').on('change', browserSync.reload);
}

What this method does

I first initialise BrowserSync by setting the baseDir. This will set up an Access URL where you can view your website. I am setting this to the same folder my file is in, this is where my index.html is. But if you have a local setup, you can add your url here, eg. my-site.dev.

Then we add our watch tasks.

gulp.watch('./assets/scss/*.scss', style) : It accepts 2 parameters, the files you want to watch and the function you want to run. This watches for a change in a .scss file that exists within my assets/scss folder, and calls my style method that I wrote before. This means that the Sass will automatically compile and BrowserSync will inject the css changes on my site straight away.

gulp.watch('./**/*.html').on('change', browserSync.reload): Here we are watching for a change in any .html in my project. When a .html file changes, it calls browserSync.reload that refreshes my browser so we will see the change straight away.

Set a Default task

Finally I set my default gulp task, which means it will run when I type gulp in the cmd line. I want it to use my watch function by default, however I could write gulp watch and it will do the same. But it's good for learning purposes and it is quicker to type.

exports.default = watch;

Conclusion

I went back and forth a bit, fixing one thing, adding a new plugin that turned out breaking something else but it's all a part of learning. I learned more about npm-packages like I have installed tons but never uninstalled one before - it's just npm uninstall my-package who knew!? I know it sounds simple but I have come to a point now where if I get a problem and I solve it myself (by googling obvs), I feel soo good. Like I can figure it out by myself, it's ok.

Another funny thing that happened is that once I pushed my new gulpfile to my repository on Github, Github was like oh no hun - you got security alerts. Long story short, I figured out that I was on an older node version, moved to a newer one, learned about npm audit and fixed the security flaws. This article helped me and npm audit fix worked like a dream.

So, this was a great learning process for me and I can now use gulp (and npm) more confidently. Here is the final gulpfile if anyone is interested.

The final gulpfile

const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();

// Compile, SourceMaps and Minify CSS
function style() {
    return gulp.src('./assets/scss/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./assets/css'))
        .pipe(browserSync.stream())
}

// Watch for file changes
function watch() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch('./assets/scss/*.scss', style);
    gulp.watch('./**/*.html').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

// Default function when you run gulp
exports.default = watch;

My 2019

Zara — Thu, 02 Jan 2020 13:55:05 +0000

I love looking back on the year that has passed, it helps me realise how much has actually happened and to recognise all the good things I have done. The brain has a tendency to hold on to the negative things so I put a lot of effort to always notice and remember the good things in life.

I have kept a log of my days since 2012, but been adding in more details for each year and this year I even added "Highlights of the week" where I would list my 3-5 favourite things from the week. Yeah. I love this shit.

So let's recap 2019.

January

I started the year in Sweden with my parents. On the 1st, I flew back to Brighton and I started Veganuary. I attended Async and learned about WebGL. Organised a few codebar's and ate some pizza.

I spoke about codebar in the Winter Issue of Thrive The Magazine that came out in January.

// Detect dark theme var iframe = document.getElementById('tweet-1084742388470464513-742'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1084742388470464513&theme=dark" }

Brighton Eagle Lab hosted a free IoT workshop for 3 sessions (every other Thursday).

The lead dev Aidan at Gene offered to mentor me! This was really exciting as I am always trying to grow and having someone to guide me, share my goals with and get advice from is priceless.

February

// Detect dark theme var iframe = document.getElementById('tweet-1093623295533043713-144'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1093623295533043713&theme=dark" }

The IoT workshops were so fuuun. Just made some lights blink.

Aidan and I had our first mentoring session and Aidan made a training plan for me. I want to learn programming techniques, logic, different approaches and ways to solve problems. The plan was to build a website in PHP where you can register as a user, login, create posts, edit them, delete them and view all posts (CRUD). This also introduced me to working with databases, learning about security and keeping code DRY. But February was just the start.

And the codebar girls got a lovely shoutout on Galentine’s Day! You can find the article here.

// Detect dark theme var iframe = document.getElementById('tweet-1094926087648411648-999'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1094926087648411648&theme=dark" }

March

Went on my first ever hen do in Toulouse! We Spring Forward kicked off and a friend and I attended a confidence workshop. On International Women's day a few days later, it was She Says Brighton which is always so, so inspiring.

// Detect dark theme var iframe = document.getElementById('tweet-1104102836961460224-895'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1104102836961460224&theme=dark" }

I went to Async again where Pete G spoke about Imposter Syndrome which was so insightful.

// Detect dark theme var iframe = document.getElementById('tweet-1106303961605304320-759'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1106303961605304320&theme=dark" }

April

We had a "Intro to Python" evening at Gene. I got told I get to go to Magento Imagine - the biggest Magento conference that is hosted in VEGAS. What. is. up.

May

Went to Vegas - it was my first Magento conference. It was unreal couple of days filled with activities like running 5K to Hoover Dam, party in the Stratosphere (and rode a rollercoaster at the top!), panels and developer sessions. So. fun.

// Detect dark theme var iframe = document.getElementById('tweet-1127628722259906561-523'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1127628722259906561&theme=dark" }

The week after Vegas, I flew back to Toulouse for my friends wedding. This was one of the highlights of the year. I reunited with people I have not seen since 2012 when I studied in America. It was a beautiful weekend and I danced so much I broke a nerve in my big toe (which still hasn't healed oops).

June

2 year anniversary at Gene and as a developer! We hosted codebar at Gene.

// Detect dark theme var iframe = document.getElementById('tweet-1138534045799911426-276'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1138534045799911426&theme=dark" }

We also had our first Gene day where our offices from Liverpool and London came down to Brighton for the day. We spent the morning doing a communication workshop, followed by a team building exercise at Phileas Fogg! In the evening, there was a dinner and drinks but I missed it as I went to Manchester for the weekend! And in the end of the month, I got to attend Patterns Day, always so brilliant and I got to see one of my big role models, Una speak!

July

Attended Async and learned about Gatsby Js. I went to Clearleft lovely summer party.

I also signed up and attended a Magento Speaker workshop. This was an online course that, due to time differences, took place over 2 Saturday evenings, but it was really interesting and fun to attend! It was run by Jill Binder, who founded Diverse in Tech and she was absolutely brilliant. At the end of the course, I had a talk idea outlined but I am still working on that talk. Maybe this year I will do my first technical talk...

We started doing Friday dev sessions at Gene and I lead a session about Semantic HTML. Gene also hosted the first Brighton Magento Meetup where our own Michael and Sophie spoke. Really fun evening!

// Detect dark theme var iframe = document.getElementById('tweet-1151571402702622720-770'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1151571402702622720&theme=dark" }

August

Did not work a lot in August! I spent the beginning in Romania at Untold Music Festival, the middle (and my birthday weekend) in Portugal and the end, I spent 12 days in Sweden with my family.

September

Completed Tough Mudder!

October

A website (where I was the FE lead for the first time) went live! Attended Async again about JavaScript bots and editor frameworks. I went to Sweden for a weekend to surprise my dad for his birthday.

I completed Hacktoberfest & I attended my last codebar as an organiser.

// Detect dark theme var iframe = document.getElementById('tweet-1186723646208987139-104'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1186723646208987139&theme=dark" }

That same week, I started as a instructor for Code First: Girls. This was for a 8 week course teaching HTML, CSS, JavaScript, held at Sussex University every Thursday evening. We had one lead instructor who did the course before and 4 rookie instructors. But it went great and it was so fun!

The second week was CSS and I got to lead the class! I was nervous all week for it (even had a nervous eye twitch!) but I smashed it and I was so proud.

// Detect dark theme var iframe = document.getElementById('tweet-1190352056265121794-973'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1190352056265121794&theme=dark" }

November

// Detect dark theme var iframe = document.getElementById('tweet-1192739004107689985-53'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1192739004107689985&theme=dark" }

Only because a colleague of mine got sick, I got to take his place and attend FFconf again! Absolutely loved it, brilliant speakers and I got to see so many familiar faces. Always such a great conference.

Code First:Girls sessions carried on and I enjoyed being an instructor so much. I would arrive with low energy from the work day and thrive with happiness on the train home. Love teaching!

oh, and I became a certified Magento Front End Developer!
// Detect dark theme var iframe = document.getElementById('tweet-1197833954205847552-648'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197833954205847552&theme=dark" }

December

Gene held it's Christmas party and on the same day, it was the last Code First:Girls session! So I managed to attend the beginning of Christmas party, skipped the dinner to go to CF:G and came back after for the drinks. I did not wanna miss seeing everyone's projects!

// Detect dark theme var iframe = document.getElementById('tweet-1205544867050532874-761'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1205544867050532874&theme=dark" }

I also attended the codebar Christmas party which was so lovely! I saw so many people I haven't seen for a while, there was an amazing show & tell and all around spread of love.

// Detect dark theme var iframe = document.getElementById('tweet-1207057583208620032-353'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1207057583208620032&theme=dark" }

And that brings us up to Christmas which I spent in Sweden in the snow with my family and our dogs. Celebrated New Years back in Brighton with my boyfriend.

.. And a little about my PHP Project

I worked on my project 26 times over the year. Mostly over weekends. It has been such a fun learning progress. Almost every other week, Aidan and I would catch up on my progress and discuss next step. He would tell me what I need to add and I would have to figure out how to do it.

At the end of the summer, I had a working website with user authentication, all CRUD pages & profile pages where you could even upload your own profile pic. Mighty proud. Even went on to cover regex and wrote my own Markdown parser in PHP which was really tough but I got it working in the end. So you can write some simple markdown in the posts as well.

In November, I had all the basic functionality. But I had all my logic in one file so now it was time for refactor and restructure. I learned about "Business Logic", and started learning OOP to re-write all my post functions in to one class. At the end of the year, I also added a repository class where it will handle the posts collections.

I have learnt so much with this project over the year, so many "Aha!" moments and once my BE is in place, next steps involve writing APIs so that I can build the FE with Vue or React. It's gonna be so fun!

Summary

My year was full of professional and personal development! I got a mentor and learned tons on my side project. I became a certified Magento Front-End developer. I closed my chapter as codebar organiser after 2.5 years and opened a new chapter as Code First: Girls instructor. I kept up my training on an average of 2 sessions per week and I travelled to France, USA, Romania, Portugal and Sweden.

Another amazing year! Can't wait to see what happens in 2020.

My previous year reviews: 2018 and 2017.