Devenez le plus heureux des Front-end avec Gulp.jsRémy Savard
De nos jours, les projets Web utilisent un nombre grandissant de technologies front-end afin d’effectuer différentes tâches. Utilisées par des compagnies telle qu’Adobe, Twitter et jQuery, Gulp et Grunt vous permettrons d’automatiser des tâches récurrentes liées au développement Web.
Comprenez les différences entre Gulp et Grunt. Apprenez à automatiser les tâches récurrentes et découvrez les possibilités de Gulp à l’aide des extensions essentiels (Validation et compression de JavaScripts avec JSHint et Uglify, Compilation CSS avec SASS et Compass, Synchronisation de navigateurs avec Live Reload et Browser Sync, etc.).
Devenez le plus heureux des Front-end avec Gulp.jsRémy Savard
De nos jours, les projets Web utilisent un nombre grandissant de technologies front-end afin d’effectuer différentes tâches. Utilisées par des compagnies telle qu’Adobe, Twitter et jQuery, Gulp et Grunt vous permettrons d’automatiser des tâches récurrentes liées au développement Web.
Comprenez les différences entre Gulp et Grunt. Apprenez à automatiser les tâches récurrentes et découvrez les possibilités de Gulp à l’aide des extensions essentiels (Validation et compression de JavaScripts avec JSHint et Uglify, Compilation CSS avec SASS et Compass, Synchronisation de navigateurs avec Live Reload et Browser Sync, etc.).
Friday session where we explained what is gradle and some of the hidden features and possibilities that gradle gives to developers to customize their builds in a clean and easy way.
"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays
At some point, we reached the limit of the existing build process in the Grammarly Editor monorepo. Build tools required too much time to support, and each new package increased build time and made dependency management harder. To move further, we had to rethink the architecture of the build process. Our solution: We switched to Bazel. In this talk, I will share our findings and how we made the architecture of the build process scalable and predictable.
Efficient development workflows with composernuppla
Composer is a great tool for managing a project's dependencies - however, as with many tools there are various ways to use it. That's why this session will provide you an overview of possible workflows and shows practical solutions for building and deploying composer-managed projects. It covers experiences with handling Drupal projects and focus on approaches that can be shared across projects and team members.
Topics:
- Introduction: What is composer and how to use it with Drupal
- Build & deployment workflows for composer-managed projects
- Composer & Drupal: Challenges & solutions
- Creating re-usable packages
Виталий Редько "React + Redux: performance & scalability"Fwdays
This talk discovers the architecture aspects of scalable apps building. It gives the answers on how to reduce head ache while dealing with React + Redux stack. We'll speak about practical implementation of the concepts that help to increase scalability and performance of React apps.
A talk I gave at the Belgian Node.js Meetup on June 30th, 2016.
Topics:
- npm scripts
- private npm repositories
- version syntax
- scoped packages
- npm 3 structure changes of node_modules
- npm shrinkwrap
Managing your Drupal project with ComposerMatt Glaman
Drupal 8 is all about getting off the island and leveraging things invented elsewhere. With that, we must use a package manager tool. PHP's de facto package manager is now Composer. However, adopting Composer has been a rough spot with the Drupal community.
In this presentation, Matt Glaman will explore Composer and how using it will streamline your workflow.
Frontend asset management with Bower and Gulp.jsRenan Gonçalves
Leverage Bower as your package manager for the front-end assets of your CakePHP application. Define your packages once (jQuery, Bootstrap, and what not?), and let it download everything for you and check for compatibilities among them. No more committing third-party assets to your repository.
And also utilizing Gulp.js, the streaming build system, for automating repetitive front-end related tasks like converting LESS to CSS, CoffeeScript to JavaScript, concatenating files, minifying them, etc with just a single command.
This slide will make the assumption that you have never used a task runner before and will walk through every step required to get up and running with gulp.
OpenCms 8.5 added the CMIS interface that allows standardized access to the contents located in the OpenCms repository. OpenCms 9 takes the concept of standardized access to the repository one step further by allowing OpenCms folders to be mounted as Windows (or Samba) shared network drives.
With OpenCms 9 shared folders, content managers can manage images and documents in the OpenCms repository simply on their local desktop. This is especially appealing if OpenCms is used in the Intranet.
In this workshop, Georg will show how to set up OpenCms folders so that they can be shared with Windows. He will also explain how to access and manage resources in an OpenCms module directly from an IDE such as Eclipse.
Docker is an elegant software that empowers application developers to efficiently create containers and create parity between local and production environments. It is an increasingly popular platform that has revolutionized development over the last few years.
We at YipitData have dramatically scaled our technology platform through containerization and are big proponents of Docker. This slide deck will cover the "first mile" of developing in Docker and container architecture through the following topics:
- Explaining how Dockerfiles, images, and containers relate to one another
- Using the Docker CLI to launch and manage containers
- Best practices for writing Dockerfiles and optimizing images
- Tips and tricks for local development
By the end of the presentation, I hope you will be excited to experiment with Docker and discover more about this extremely valuable technology.
Disclaimer: YipitData is not endorsed by, directly affiliated with, maintained, authorized, or sponsored by Docker Inc.
Instrumentación de entrega continua con GitlabSoftware Guru
Mostraremos el caso real de cómo tenemos implementado en nuestra empresa el flujo de desarrollo para integración y entrega continua, instrumentado con GitLab.
Sesión presentada por David Padilla en SG Next 2017
DevOps is a large part of a company of any size. In the 9+ years that I have been a professional developer I have always taken an interest in DevOps and have been the "server person" for most of the teams I have been a part of. I would like to teach others how easy it is to implement modern tools to make their everyday development and development processes better. I will cover a range of topics from "Stop using WAMP/MAMP and start using Vagrant", "version control isn't renaming files", "Automate common tasks with shell scripts / command line PHP apps" and "From Vagrant to Production".
"13 ways to run web applications on the Internet" Andrii ShumadaFwdays
So, we wrote our app. Using Node.js, React, or Angular. And what's next? How your masterpiece can be shown to the entire Internet, or at least your mom, client, or friends. Probably you should find a DevOps, that will launch it for us... But what if I tell you, how to do it on your own? At this talk I'll show you 13 ways, how to launch your app on the Internet, what is the difference between them, and which method you should choose in a particular situation, from simple to complex, from free to expensive and robust.
Gulp is a front-end development tool.
It is basically a streaming build system which provides a way of doing automatic tasks that you have to do yourself again and again.
It's easy to use and very efficient. It all depends on plugins that are intended to only do one job each.
View the deck to know more about Gulp.
Time's Important - Let Task Management Save YoursJames Bundey
Presented at WordCamp Sunshine Coast 2016. The presentation covers how task runners such as Grunt & Gulp can be utilised to automate and save on development time.
The presentation covers how to get started using Gulp, useful plugins and how Gulp can be incorporated into WordPress theme development for create lean and fast websites.
Friday session where we explained what is gradle and some of the hidden features and possibilities that gradle gives to developers to customize their builds in a clean and easy way.
"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays
At some point, we reached the limit of the existing build process in the Grammarly Editor monorepo. Build tools required too much time to support, and each new package increased build time and made dependency management harder. To move further, we had to rethink the architecture of the build process. Our solution: We switched to Bazel. In this talk, I will share our findings and how we made the architecture of the build process scalable and predictable.
Efficient development workflows with composernuppla
Composer is a great tool for managing a project's dependencies - however, as with many tools there are various ways to use it. That's why this session will provide you an overview of possible workflows and shows practical solutions for building and deploying composer-managed projects. It covers experiences with handling Drupal projects and focus on approaches that can be shared across projects and team members.
Topics:
- Introduction: What is composer and how to use it with Drupal
- Build & deployment workflows for composer-managed projects
- Composer & Drupal: Challenges & solutions
- Creating re-usable packages
Виталий Редько "React + Redux: performance & scalability"Fwdays
This talk discovers the architecture aspects of scalable apps building. It gives the answers on how to reduce head ache while dealing with React + Redux stack. We'll speak about practical implementation of the concepts that help to increase scalability and performance of React apps.
A talk I gave at the Belgian Node.js Meetup on June 30th, 2016.
Topics:
- npm scripts
- private npm repositories
- version syntax
- scoped packages
- npm 3 structure changes of node_modules
- npm shrinkwrap
Managing your Drupal project with ComposerMatt Glaman
Drupal 8 is all about getting off the island and leveraging things invented elsewhere. With that, we must use a package manager tool. PHP's de facto package manager is now Composer. However, adopting Composer has been a rough spot with the Drupal community.
In this presentation, Matt Glaman will explore Composer and how using it will streamline your workflow.
Frontend asset management with Bower and Gulp.jsRenan Gonçalves
Leverage Bower as your package manager for the front-end assets of your CakePHP application. Define your packages once (jQuery, Bootstrap, and what not?), and let it download everything for you and check for compatibilities among them. No more committing third-party assets to your repository.
And also utilizing Gulp.js, the streaming build system, for automating repetitive front-end related tasks like converting LESS to CSS, CoffeeScript to JavaScript, concatenating files, minifying them, etc with just a single command.
This slide will make the assumption that you have never used a task runner before and will walk through every step required to get up and running with gulp.
OpenCms 8.5 added the CMIS interface that allows standardized access to the contents located in the OpenCms repository. OpenCms 9 takes the concept of standardized access to the repository one step further by allowing OpenCms folders to be mounted as Windows (or Samba) shared network drives.
With OpenCms 9 shared folders, content managers can manage images and documents in the OpenCms repository simply on their local desktop. This is especially appealing if OpenCms is used in the Intranet.
In this workshop, Georg will show how to set up OpenCms folders so that they can be shared with Windows. He will also explain how to access and manage resources in an OpenCms module directly from an IDE such as Eclipse.
Docker is an elegant software that empowers application developers to efficiently create containers and create parity between local and production environments. It is an increasingly popular platform that has revolutionized development over the last few years.
We at YipitData have dramatically scaled our technology platform through containerization and are big proponents of Docker. This slide deck will cover the "first mile" of developing in Docker and container architecture through the following topics:
- Explaining how Dockerfiles, images, and containers relate to one another
- Using the Docker CLI to launch and manage containers
- Best practices for writing Dockerfiles and optimizing images
- Tips and tricks for local development
By the end of the presentation, I hope you will be excited to experiment with Docker and discover more about this extremely valuable technology.
Disclaimer: YipitData is not endorsed by, directly affiliated with, maintained, authorized, or sponsored by Docker Inc.
Instrumentación de entrega continua con GitlabSoftware Guru
Mostraremos el caso real de cómo tenemos implementado en nuestra empresa el flujo de desarrollo para integración y entrega continua, instrumentado con GitLab.
Sesión presentada por David Padilla en SG Next 2017
DevOps is a large part of a company of any size. In the 9+ years that I have been a professional developer I have always taken an interest in DevOps and have been the "server person" for most of the teams I have been a part of. I would like to teach others how easy it is to implement modern tools to make their everyday development and development processes better. I will cover a range of topics from "Stop using WAMP/MAMP and start using Vagrant", "version control isn't renaming files", "Automate common tasks with shell scripts / command line PHP apps" and "From Vagrant to Production".
"13 ways to run web applications on the Internet" Andrii ShumadaFwdays
So, we wrote our app. Using Node.js, React, or Angular. And what's next? How your masterpiece can be shown to the entire Internet, or at least your mom, client, or friends. Probably you should find a DevOps, that will launch it for us... But what if I tell you, how to do it on your own? At this talk I'll show you 13 ways, how to launch your app on the Internet, what is the difference between them, and which method you should choose in a particular situation, from simple to complex, from free to expensive and robust.
Gulp is a front-end development tool.
It is basically a streaming build system which provides a way of doing automatic tasks that you have to do yourself again and again.
It's easy to use and very efficient. It all depends on plugins that are intended to only do one job each.
View the deck to know more about Gulp.
Time's Important - Let Task Management Save YoursJames Bundey
Presented at WordCamp Sunshine Coast 2016. The presentation covers how task runners such as Grunt & Gulp can be utilised to automate and save on development time.
The presentation covers how to get started using Gulp, useful plugins and how Gulp can be incorporated into WordPress theme development for create lean and fast websites.
Automating WordPress Plugin Development with GulpMike Hale
Gulp.js is a task runner to automate the build process. In this talk, you’ll learn how to use Gulp to automate plugin development by compiling SASS, minifying JavaScript files, and creating translation files to build a starter WordPress plugin. WordCamp St. Louis 2016 #wcstl
In this presentation, I'm covering the topics
Node Package Manager (npm)
initializing a node project
dependencies and dev dependencies
Installation, listing and uninstallation of node packages
Importing of modules
Improving build solutions dependency management with webpackNodeXperts
Do you know ? - " The fine art of Webpack "
Topics Covered :
- What are Build Tools ?
- What is a Dependency graph ?
- What is webpack & its impacts
- What is a webpack config file and how is it written ?
- Webpack VS Grunt/Gulp & Browserify
JLPDevs - Optimization Tooling for Modern Web App DevelopmentJLP Community
The core content is about optimizing our web app development, functionality, and performance with various tooling. The main language/platform we will be talking are JavaScript and Node.js.
With JavaScript being no toy language anymore our demands on a high quality development environment have risen tremendously. One part of a good development environment are build tools, and Gulp.js -- being the JavaScript streaming build system -- is but one of the many choices a developer has nowadays. For many however, it's considered to be the best! In this three hour workshop, we will take a good look into Gulp and its possibilities. After our in-depth 3 hour course you will be able to do the following:
- Know how Gulp's API and the ecosystem of its plugins work
- Create parallel and sequential execution chains to be in total control of your build flow
- Know how 3rd party Node modules evolve around Gulp and how they can be integrated
- Create incremental builds to speed up your build time
- Know how streams work in Node.js
- And use stream arrays and merge streams to plumb together sophisticated pipelines doing all the work for you
Join us and become a build plumber!
More information
http://github.com/frontend-tooling
http://bit.ly/gulp-tool-book
http://fettblog.eu
Zero Downtime Deployment with Ansible - learn how to provision Linux servers with a web-proxy, a database and automate zero downtime deployment of a Java application to a load balanced environment.
These are the slides from a tutorial held at the Velocity Conference in Barcelona November 19th, 2014.
Git repo: https://github.com/steinim/zero-downtime-ansible
Hands on Docker - Launch your own LEMP or LAMP stack - SunshinePHPDana Luther
In this tutorial we will go over setting up a standard LEMP stack for development use and learn how to modify it to mimic your production/pre-production environments as closely as possible. We will go over how to switch from Nginx to Apache, upgrade PHP versions and introduce additional storage engines such as Redis to the equation. We'll also step through how to run both unit and acceptance suites using headless Selenium images in the stack. Leave here fully confident in knowing that whatever environment you get thrown into, you can replicate it and work in it comfortably.
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...Evan Mullins
Overview of some processes used at an agency level. Version control, code standards, database migrations, environment aware config files and automated deployments. From local development setup to multiple environments, version control to automated deployments, content migration to modular mentalities. With some how-to talk and some how-not-to talk, we’ll discuss some ways to “soup up” our process to work for us when it comes to web development and WordPress.
React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC. React abstracts away the DOM from you, offering a simpler programming model and better performance.
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Philipp Burgmer
Slides for my talk at Karlsruher Entwicklertag 2014.
Visit us at http://www.thecodecampus.de
Folien zu meinem Vortrag beim Karlsruher Entwicklertag 2014.
Für die meisten Sprachen hat sich in den letzten Jahren und Jahrzehnten ein Tool als Build-System etabliert. Maven für Java, Make für Linux, SBT für Scala usw. und so fort. Doch was ist mit Web-Anwendungen die z.B. auf AngularJS basieren, bei denen die gesamte UI im Browser läuft, die immer komplexer werden, die immer mehr Code enthalten und aus immer mehr einzelnen Dateien bestehen. Wer oder besser gesagt womit baut man hier seine Anwendung? Wer führt Tests aus und wie liefere ich solche eine Anwendung aus? Welche Hürden sind hier zu nehmen?
Mit Grunt hat sich 2013 ein modernes JavaScript Pendant zu Ant etabliert. Doch bei genauerer Betrachtung ist Grunt zwar moderner, aber trotzdem ähnlich abstrakt und low-level wie Ant. Hier kommen Bower und fabs ins Spiel: Bower kümmert sich um Dependencies und fabs konfiguriert Grunt um einen feature-reichen, anpassbaren Build zur Verfügung zu stellen.
In meinem Vortrag beim Karlsruher Entwicklertag 2014 habe ich gezeigt wie mit Grunt, Bower und fabs ein moderner Build und Development-Workflow mit LiveReload, Test-Ausführung, Code-Minimierung und vielem mehr aufgebaut werden kann um auch große Web-Anwendungen mit mehreren Entwicklern schnell voran treiben und zuverlässig ausliefern zu können.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Gulp and bower Implementation
1.
2. What is Gulp?
Gulp is a javascript task runner for front end
development built in node.js and npm that
lets you automate tasks such as…
● Bundling and minifying libraries and stylesheets.
● Refreshing your browser when you save a file.
● Less/Sass to CSS compilation
● Copying modified files to an output directory
4. The simple gulp API
There are only 4 api’s in gulp!
API Purpose
gulp.task Define a task
gulp.src Read file in
gulp.dest Write file out
gulp.watch Watch file for change
5. More technically ..
● gulpfile.js - Tells Gulp for every tasks, what those tasks are, when to run them.
● Package.json - List of installed plugins
Create both of them at root directory
6. Installing gulp
via npm
Install Node
When Installing gulp we first need to install
node.js which can be found at:
https://nodejs.org/en/download/
Once downloaded install node on default
settings. After the installation is finished you
can go to command prompt and type:
node -v
If it displays the version then the node has
been setup properly and we can move to next
step.
7. Navigate your
project directory
Once you have made it to your project directory -
let's run a quick npm command to initialize our
package.json file.
This will prompt us to answer a few questions
about our project. Once completed, it will create a
file in the root directory of the project called
package.json which will provide information about
the project and its dependencies.
8. Next step :
Installing gulp
globally
When you're ready to install gulp, jump back
to your command-line application and type:
Let’s take a moment to break this down.
npm is the application we are using to install
our package.
We are running the install command on that
application.
The -g is an optional flag used to signify that
we want to install this package globally so
that any project can use it.
And finally, gulp is the name of the package
we would like to install.
9. Next step : check
gulp version and
install locally
This should return the version number on the
next line of your command-line.
Next, we also need to install gulp locally.
One this --save-dev flag which instructs npm
to add the dependency to our
devDependencies list in our package.json file
that we created earlier.
10. Find npm gulp
packages
We can search gulp packages in link below:
https://www.npmjs.com/package/gulp
11. Setting up gulp
dependencies
We have our package.json file initialised and gulp
setup completed.
Now, we are installing the dependencies required for
compiling your SASS file into CSS file.
Examples of npm packages for gulp are showed on
the left side of the slide.
The first one will install sass compiler for gulp.
Similarly, the second one will install the package for
generating sourcemap for our compiled CSS file and
finally the last one will install the package to check
js/javascript.
These are just the examples of packages and you can
use any package you want according to your
preferences, you can search for packages at:
https://www.npmjs.com/
npm install gulp-sass --save-dev
npm install gulp-sourcemaps --save-dev
npm install gulp-jshint --save-dev
Or alternatively you can run
npm install gulp-jshint gulp-sass gulp-
concat gulp-uglify gulp-sourcemaps --save-
dev
12. Create our gulpfile.js
In the root directory of the project create a
new file and name it gulpfile.js
The main task of gulpfile.js is to give
instruction to gulp to perform certain tasks
and this is where our automation will start.
13. gulpfile.js continued
Once the gulpfile.js has been created type the text on the
left on the file.
Here we are defining variable for the dependencies that we
installed earlier.
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
14. Lint task
Our lint task checks any JavaScript file in our js/
directory and makes sure there are no errors in
our code.
15. Sass task
The sass task compiles any of our Sass files in
our scss/ directory into CSS and saves the
compiled CSS file in our dist/css directory.
16. Script task
The scripts task concatenates all JavaScript files
in our js/ directory and saves the ouput to our
dist/js directory. Then gulp takes that
concatenated file, minifies it, renames it and
saves it to the dist/js directory alongside the
concatenated file.
17. Watch task
The watch task is used to run tasks as we make
changes to our files. As you write code and
modify your files, the gulp.watch() method will
listen for changes and automatically run our tasks
again so we don't have to continuously jump back
to our command-line and run the gulp command
each time.
18. Defult task
Finally, we have our default task which is used as a grouped reference to our other tasks. This will be the
task that is ran upon entering gulp into the command line without any additional parameters.
Now, all we have left to do is run gulp. Switch back over to your command-line and type:
or
This will call gulp and run everything we have defined in our default task.
19. Error log (Watch stops on errors)
We can see details of error log in the terminal by adding function below
You should set this error callback on each task that may fail
Error example
20. Browsersync
Browsersync for live reloading, interaction synchronization etc
First, you'll need to install Browsersync & Gulp as development dependencies.
Then, use them within your and add ‘browser-sync’ task in gulp default task in ‘gulpfile.js’
22. What is bower?
a Package manager for the Web
Bower is a front-end package manager built
by Twitter.
Bower can manage components that contain
HTML, CSS, JavaScript, fonts or even image
files.
Bower doesn’t concatenate or minify code or
do anything else - it just installs the right
versions of the packages you need and their
dependencies.
23. Install Bower
Bower is a command line utility. Intstall it with
npm.
Bower requires node, npm and git.
Troubleshooting
https://bower.io/
https://github.com/bower/bower/wiki/Troubl
eshooting
First install bower globally
24. Search packages
Search Bower packages and find the
registered package names for your favorite
projects.
Or command followed by what you are
searching for:-
25. Install packages
Install packages with bower install. Bower
installs packages to bower_components/.
Or command followed by what you are
searching for:-
or
28. Some useful command line reference
● cache
● help
● home
● info
● init
● install
● link
● list
login
lookup
prune
register
search
update
uninstall
unregister