gulp.js

Getting Up To Speed With GULP.js

Posted on Updated on

At 10:30am on 3/6/2019, I attended Getting Up To Speed With GULP.js presented by Michael Schore, at the 2019 North Carolina Computer Instruction Association Conference in the SciTech Building At East Carolina University in Greenville, NC.

Getting Up To Speed With GULP.js

What its used for

Installation process and requirements

Basic usage

What its used for

GULP is a task runner, and its used to automate the processes you have. There are all kinds of helpers out there that help us streamline. Mainly NODE and NODE JS and NPM, Node Package Manager.

Bootstrap connection

Bootstrap is the material components that begin when a computer opens. Babel, browserfly, grunt, bauer, yeoman, all helpful. Most of these sprouted up as open source products, and still are. Starting in the web, everything was proprietary, but now many things are open.

PURPOSE OF GULP

It is often used to do front end tasks such as spinning up a web server, reloading the browser automatically whenever a file is saved. Using preprocessors like SASS or LESS (style systems to overcome CSS problems or inabilities), but also allow you to use global variables. Also it allows for optimizing assets like CSS, JS, and Images.

Installation process and requirements

Node.js requires node, npx, npm. Sass requires Ruby.

GIT from git-scm.com. Get Node.js from nodejs.org. Ruby from Rubyinstaller.org

Installation

Installers are pretty straightforward. With NPM installed, we can simply execute a global installation command. Command line can be overwhelming and difficult to understand for GUI-minded individuals. Powershell and CMD or BASH are great to work with.

Installing and verifying GULP

Install GULP into your dev dependencies. Check the versions of the install, and now we’re ready to start GULPing!

Basic usage

To create our first file, it should be in the root directory of your project.

Which yields…

Basic Useful Plugins

Found on the github website: http://github.com.gulpjs

Gulp-util https://github.com/gulpjs/gulptili

Running out of the box

Bash will note that an error occurs out of the box. We didn’t give it anything to do, and we didn’t make it local

Be cautious of the node_modules directory. This will grow as time goes on.

WALKTHROUGH

Lets add the gulp-less module. This adds the ability to conver LESS to CSS. Less is a backwards-compatible language extension for CSS. This is the official documentation file for LESS. This will be another hands-on bit, so I may only show slides here…

BASICS

Used to actually automate your tasks. Simple ones like the example just run a goup of tasks when called

Var gulp = require(‘gulp’)

Var uglify = require(‘gulp-uglify’)

 

Gulp.task(‘uglify’,   … Hands-on…

Going to devhint.io you can get to a treasure trove of examples using GULP. Items like EMCAscript6 (newest version of javascript at this time) can be found, used and massaged, it can be found. IF your legal department requires you to update the header for the document automatically every time you work with the file, GULP and set that up.

The biggest thing GULP is used for is to watch yourself and run functions when changes are made. It automatically generates javascript or copyscript or typescript files when files are adjusted if needed. It can compile different script files into backward compatible javascript files. Think of the time this would save!

When we as humans find a mind-numbing, repetitive task to do, we find a machine to do it. If there isn’t one, we (historically at least) find a peon, subject, or slave to do the task.

Gulp.js files are used to cover several items- Pipe is a movement command, and its heavily used in an example we cover during class time. This is a different way of setting up tasks and subroutines (or functions) to cover different tasks.

When running the script on your computer, the WATCH function comes into play. When anything happens which affects the files/functions being WATCHED, it updates the materials in the folder. Because items are updated and fixed when changes are made to WATCHED files, this is a major upgrade to workflow on items.

 

What are some good files to WATCH?

Well, if you’re working with HTML, CSS files, HTML files, IMG files, JS files, etc. As new files are added to a folder, they can be added to the server, PHP plugins are also good. At the corporate level, teams get together  to talk about code and workflow to find out how much they can write, use, and test. This is especially good for items with our students, and to add productivity for workers making high 5 or 6 figure salaries.

Is everything safe?

Dig into it. On the surface it may sound good, but read what people are saying, and you might find that its not what its cracked up to be. It depends on the workflow, variables, and items you’re using. Be vigilant and don’t just take part because everyone else is.

How is SAS acting with all the opensource products?

Who owns github? Microsoft. Corporations use enterprise solutions with them, having their entire software library in their storage. The entire .NET framework is now available as open source code. They are hoping to gain a better product and enhanced usability with the open products. SAS is in a weird position as they are very proprietary in nature. IBM in true IBM fashion, will give things, but try to take things with their other hand.

There is more movement to OS involvement. You cannot add so many proprietary things. Its good to have other eyes looking at your work with and eye to improvement. Our students need to know what is happening in the working world, but they must also take that on themselves.

If we push students all the time, they don’t learn to push themselves. Michael teaches them that this is not the end of the line, this is the beginning of the line. We are giving our students tools that they can use. This is not the end all be all. The tools may be inadequate later, but the skills will take you far. We focus on solving problems, not following steps 1,2,3.

 

A New Direction For Teaching Web Technologies

Posted on

At 1:45pm on 3/21/2018, I attended A New Direction For Teaching Web Technologies, presented by Michael Schore, at the 2018 North Carolina Computer Instruction Association Conference in At Asheville-Buncomb Technical Community College in Asheville, NC.

Time to Leave Dreamweaver Behind

The focus on Dreamweaver for our students should be coming to an end. Dremaweaver has fallen out of favor in most professional wed development environments. The workflow of the modern developer simply doesn’t work with Dreamweaver as the main tool. So what do we need to be teaching? The tools in many of today’s developers are Git, Node.ja, CSS, Gulp as an activity monitoring device, mobile-first development tools/frameworks, and of course Javascript. This presentation discussed each of these in turn and demonstrated their use in our teaching environments.

Sometimes working into what the modern developers wish to use is a bit like dropping down the rabbit hole. Every twist and turn brings a new style and way of approaching web technologies. Its cool, but a whole different mindset is required.

Code generates money. The less time which is required to generate the code translates directly into more money.

purpose of the Presentation

Why are we looking for a new direction? Our advisory committee has been telling us we need to change our tools as taught in our program at WTCC. We, the teaching community needs to model our teaching and methods to mimic and prepare students for the real world.

Installing Software

They have a concern: Security issues. It has been our experience than many students entering our WEB program don’t have much experience installing software and they are leery of doing so. PHP installation can still be daunting for many students since manual installation is still the preferred method. They are unaware, and need very closely to have hands held

CSS And It’s Issues

CSS can be difficult to work with, but it also has some programming abilities. While CSS is really like the skin and muscles’ the HTML’s skeleton, it is often difficult for programmers to grasp and play with. Why? CSS has no variables.

A Look At Git

Git is an easy version control system students can use to their projects. Rather than seeing a project accidentally go bust, GIT is a version control system to allow them to restore an older version. Git is available at: https://git-scm.com/

Git is currently available for any user in windows, MacOSX, or Linux.

The installer for Git comes with Git Bash, a command line environment. we like graphic interfaces because its all drag and drop. We don’t have to type. We don’t need menus. We’ll need to remember the syntax, order, etc. So this may be a hurdle.

GIT should be introduced to students early on. Because it focuses on version control, it would avoid issues with overwrites, different versions, etc. Its Open Source, and widely used VCS. You can save periodically (at your discretion). Git is populat because it meets so many people’s needs. However, Git helps with project file management whether in team of individual environments. We then went through several common Git commands and how they’re used.

It is run on a local computer, and should not be confused with GitHub.

GitHub

At this time GitHub has over 80 Million repositories worldwide. Imagine how many lines of code that must be! There are currently 27 Million developers worldwide. GitHub’s users create and maintain influential technologies alongside the world’s largest open source community. Developers use GitHub for personal projects, from experimenting with new programming languages to hosting their life’s work. There are also 1.8 Million businesses and organizations worldwide using GitHub. Businesses of all sizes use GitHub to support their development process and to securely build software.

A Look At Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world. We can learn more about Node.JS at their website: https://nodejs.org/en/

A Look at Gulp

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. It can be visited at: https://gulpjs.com/. By preferring code over configuration, node best practices, and a minimal API surface – gulp makes things simple to use. Using the power of node streams, gulp gives student the ability for fast builds that don’t write intermediary files to disk. By enforcing strict guidelines, plugins stay simple and work as expected.

Questions?

Have you introduced your students into SoloLearn? It jumps your students directly into coding.It can be visited at:https://www.sololearn.com/ While there are free versions, you can get examples for C++, JAVA, and Python3. It encourages everyone to be the top dog in their group. Could be great for CSC students.