If you’re paying attention to the world of front-end development, you’re surely aware of how many tools exist. Git, Stylus, Broccoli, Node, Angular, etc.
In this tutorial, we’re going to be looking at Gulp. The buzziest of all the buzzwords.
Gulp is a build-automation tool. Gulp is the work truck, where we keep our tool belt. It helps us use all the tools in our tool belt in a more effective way.
Instead of managing multiple apps to provide tooling for our individual projects, Gulp can provide us an automated build process.
Before we begin…
Gulp has a command-line interface.
If you’re not comfortable with CLIs, please see my tutorial called Getting Started with Command-Line Interfaces before reading this Gulp tutorial.
Familiarity with command-line interfaces is a requirement to being able to understand and use the things we will cover in this tutorial.
Also, I suggest downloading my sample source files. These sample source files will make it easier to test the code in this tutorial. The sample files are on GitHub.
Download sample files
If you use Git, you can issue the following command:
git clone https://github.com/drewminns/sixrevisions_gulpstarter.git
Installing Gulp on your computer
Gulp takes advantage of a JavaScript application platform called Node.js that provides us with an environment in which to run apps from.
One of the great features of Node — besides being a powerful tool for developing apps — is the package manager it comes with. Node’s default package manager is called npm.
In order to use npm and Gulp, you will need to install Node.
Once you have Node installed, you can use npm from your command line to install Gulp, and any other package you will need.
In your CLI, issue the following command:
npm install gulp -g
If you’re having trouble: Use superuser privileges
If the command above doesn’t work, prefix the command with sudo
. This command means super do. This enables administrator (superuser) access to the file system.
Whenever you have an issue performing a command, add sudo
at the start of the command:
sudo npm install gulp -g
Upon typing the command above, you may be asked for your password. The reason is that we are attempting to install the Gulp package globally on our system. If you begin to type your password, you won’t see any characters being inputted. Rest easy, the characters are there, but they’re not shown for security purposes in case someone’s looking over your shoulders.
An explanation of the command
Before moving forward, let’s break down what each portion of the command means.
npm
is the command to work within the scope of npm.install
is the action to perform within the the scope ofnpm
.gulp
is the name of the package we want to install.-g
is a command option/flag that stands for global. With this command option, we’re saying we want Gulp to be available to our entire system.
Changing to the project directory
If everything installed successfully with no errors, go ahead and change your working directory to the directory where you downloaded the sample files to.
cd /your/project/directory
This will be our project directory for this tutorial.
Using Gulp for a project
Once we have Gulp installed on our system, we can move into automating our projects.
Creating a package.json file
Run the following command:
npm init
When you type the command, you will be presented with the ability to create a file called package.json.
Fill out the fields as best you can, and in the end you will find a newly created package.json file in your project directory.
What is package.json?
The package.json file contains information about your project. As we add more packages to our project, the file will also serve as a listing for those packages, telling our system what files are needed.
If we were to move our project to another computer, or work with another developer who wants to use the same build tasks, the package.json file will serve as a manifest.
Creating a gulpfile
The engine of any project that uses Gulp is the gulpfile.js file. This JavaScript file is commonly referenced as a gulpfile. The terms “gulpfile.js” and “gulpfile” are synonymous in the context of this tutorial.
A gulpfile allows us to create tasks and automate them in our project. The contents of gulpfile.js will vary from project to project.
Let’s create a gulpfile for our project.
touch gulpfile.js
Installing Gulp plugins
Even though we installed Gulp on our system, we also need to install it in our project directory. Run the following command:
npm install gulp --save-dev
Note: You may have to type sudo
again at the start of the command to give yourself system access if you’re having trouble executing the command.
Next, let’s install a few Gulp plugins that will allow us to compile our Sass files into CSS, and then combine them all into one CSS file.
In the command line, type the following:
npm install gulp-sass gulp-concat --save-dev
node_modules directory
You’ll notice that a node_modules directory has been created inside your project directory after issuing the npm install
command. This directory contains all the required files to run the plugins.
As we install Gulp plugins and Node packages, they’ll be placed in node_modules.
Setting up a Gulp task
Within gulpfile.js, we can now set up a Gulp task.
Open up gulpfile.js in your favorite code editor and let’s get coding.
Specifying the project’s dependencies
Node’s require()
function allows us to specify the plugins that are needed in order to run our Gulp tasks. These are called dependencies. We depend on them to make our Gulp tasks work.
Also, so that we’re not calling the require()
function every time we want to reference one of our plugins, we put whatever the require()
function returns into JavaScript objects.
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat');
So now, when we use the sass()
function in our code, we’re talking about the gulp-sass plugin. When we use concat()
, we’re referencing the gulp-concat plugin.
Using the project’s dependencies
Once we’ve told Gulp what our dependencies are, we can set up a task.
We’ll create a Gulp task named styles
.
gulp.task('styles', function() {
return gulp.src('styles/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(concat('style.css'))
.pipe(gulp.dest('styles/'))
});
Whoa. What?
In the code block above, we’ve created a task called styles
. This is our reference to our task. We can use this name in other Gulp tasks, or call it from the command line.
Inside the task wrapper, we write what is essentially our script for our task. The general format of the Gulp task wrapper is:
gulp.task('name-of-the-task', function() {
// The guts go here
});
The return
statement says that the styles
task will return a value when it’s executed. The value in this case is our processed code.
We use a Gulp method called .src()
to get and specify the input files we want to run the styles
task on, which are the .scss files. By placing an asterisk (*) in the place of a specific filename, we are essentially saying, Go find any file that has an extension of .scss inside the styles directory.
gulp.task('styles', function() {
return gulp.src('styles/*.scss')
});
Now, the beautiful part of Gulp. Chaining the processes we want to execute with Node’s pipe()
method. The pipe()
method allows us to pass code from one process to another. When one plugin has processed our .scss files, the output gets passed to the next plugin.
gulp.task('styles', function() {
return gulp.src('styles/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(concat('style.css'))
.pipe(gulp.dest('styles/'));
});
This is what our styles
task does:
- Get and specify the files we want to process. For this, we use the
.src()
method to get and point to the .scss files inside the styles directory. - Compile Sass files to CSS. Remember that we instantiated the
sass()
function earlier, which refers to the gulp-sass plugin. - Combine all CSS style rules into one stylesheet. The gulp-concat plugin creates a stylesheet named style.css containing all of our CSS.
- Write the stylesheet in the styles directory. The style.css file will be placed in the styles directory. This is done with the
.dest()
method.
Running a task
Now the moment of truth. Running the task.
To run the task, first be sure that your working directory is where your gulpfile is. The following command won’t work otherwise.
Our Gulp task, as you may recall, is named styles
. To run the styles
task, issue this command:
gulp styles
Our styles
task will run and it should compile our .scss files into a file called style.css that will be placed inside the styles directory. Congrats!
One small problem though, it’s a bit arduous to switch back and forth between code and the command line to compile Sass every time we update our code.
Watching changes to your source files
Gulp has a built-in method called .watch()
, that allows us to tell Gulp to look out for any changes to our source files. This way, whenever we update any of our .scss files, our styles
task will automatically execute and recompile the styles.css file.
Let’s create another Gulp task to watch our source files. We’ll name this Gulp task as watch
. Just like our styles
task, we will create the watch
task using the task wrapper.
gulp.task('watch', function() {
// The guts goes here
});
This is what the watch
task will do:
- Use Gulp’s
.watch()
method to monitor any changes to any of our .scss files. - Whenever Gulp detects a change, our
styles
task will be executed.
gulp.task('watch', function() {
gulp.watch('styles/*.scss', ['styles']);
});
Now, instead of running gulp styles
whenever we want to compile our Sass, we can run gulp watch
just once when we’re working on a project. Gulp will watch our Sass files for any change. When it sees that we have updated a Sass file, it will automatically run our styles
task. This will happen whenever we save a .scss file.
Creating new tasks
Gulp has a massive community. It has over 1,400 plugins right now. We can improve our build process with these plugins.
Let’s create another Gulp task. This new task will analyse our JavaScript files to find common issues. For this Gulp task, we will lean on JSHint.
JSHint is a JavaScript code-quality analysis tool. JSHint will go over our JavaScript files with a fine-toothed comb and if it spots something problematic, it will print the issue in our command line.
To use JSHint, we can install and require a Gulp plugin called gulp-jshint.
First, let’s install the gulp-jshint plugin to our project.
npm install gulp-jshint --save-dev
Next, let’s amend our dependencies statement in our gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint');
So now we have sass()
, concat()
and jshint()
at this point.
Let’s set up a task called jshint
. This Gulp task will run gulp-jshint on .js files that are inside the js directory.
gulp.task('jshint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
});
Our task doesn’t need to output any file. Instead, if JSHint catches any errors, we’ll be notified via our command line.
To run the task we can issue the following command:
gulp jshint
We can also add the jshint
task to our watch
task so we don’t have to manually call it whenever we make changes to our JavaScript files.
gulp.task('watch', function() {
gulp.watch('styles/*.scss', ['styles']);
gulp.watch('js/*.js', ['jshint']);
});
Adding processes to existing tasks
We can easily add more things to do for our existing tasks. Let’s do that now.
Let’s install a supplemental plugin that will give us a more readable output.
Run the following command to install the JSHint-stylish library to our project.
npm install jshint-stylish --save-dev
We can then modify our jshint
task so that it uses jshint-stylish as our reporter.
gulp.task('jshint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
});
Let’s run the jshint
task:
gulp jshint
If JSHint discovers errors and code-quality issues, it will output it in our command line.
$ gulp jshint [10:29:57] Starting 'jshint'... jsmain.js line 2 col 7 Use '===' to compare with '0'. ‼ 1 warning [10:29:57] Finished 'jshint' after 93 ms
Auto-prefix CSS properties
Vendor-prefixing CSS properties is a lot of work and knowing what to prefix is a job all on it’s own.
Luckily there’s a package called Autoprefixer that will do all the hard work for us.
Install the gulp-autoprefixer plugin to your project with the following command.
npm install gulp-autoprefixer --save-dev
Append our dependencies statement to require the gulp-autoprefixer plugin.
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer');
Modify the styles
task to pipe the gulp-autoprefixer plugin process.
gulp.task('styles', function() {
return gulp.src('styles/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(concat('style.css'))
.pipe(autoprefixer())
.pipe(gulp.dest('styles/'));
});
To ensure that you’re targeting the right browsers, you can pass in a comma-seperated list of browsers to support.
gulp.task('styles', function() {
return gulp.src('styles/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(concat('style.css'))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('styles/'));
});
The above will support the last 2 versions of all browsers, Safari 5, IE 8 and 9 and Opera 12.1.
A full list of values you can pass in can be found here at Browserslist.
Putting it all together
At this point, we have three Gulp tasks that all serve a purpose in our build process:
styles
– deals with processes related to our CSSjshint
– checks our JavaScript fileswatch
– automatically runs thestyles
andwatch
tasks whenever Gulp detects changes in our source files.
However, we can make one master task that accomplishes all of these in one go.
Right now, we could run gulp watch
and it would start the watch
task, which would in turn wait for us to make a change to our files.
However, what if we wanted the files to be compiled and checked immediately, and then watched for a change, all by simply typing gulp
.
Within gulpfile.js
, add a new task called default
, but instead of using a function for the second argument, use an array.
gulp.task('default', []);
Within that array, we can pass in our tasks in the order we want them run.
gulp.task('default', ['styles', 'jshint', 'watch']);
Now when we run gulp
in the command line in our project directory, it will:
- Compile our Sass to CSS
- Combine all our CSS into one file called styles.css
- Add vendor-prefixes to the appropriate CSS properties
- check our .js files for errors
- Watch our source files for changes and rerun our tasks automatically
Imagine having to do all of that manually. Every single time you update your source code. Not only is this build process tedious to do without a task runner, but it’s also prone to human error.
Here are the contents of our gulpfile:
// Dependencies
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer');
// Task: styles
gulp.task('styles', function() {
return gulp.src('styles/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(concat('style.css'))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('styles/'))
});
// Task: watch
gulp.task('watch', function() {
gulp.watch('styles/*.scss', ['styles']);
});
// Task: jshint
gulp.task('jshint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Default task
gulp.task('default', ['styles', 'jshint', 'watch']);
Moving forward
The Gulp ecosystem is massive and developers are creating new tools and plugins every day.
To see what plugins are available for you use, check out the Gulp Plugin Registry.
Related Content
- Getting Started with Command-Line Interfaces
- How to Install Node.js
- Bower Beginner’s Guide
- Speed Up Your Web Development Workflow with Grunt
Drew Minns is a designer, developer and educator. He’s a Lead Instructor and Developer at HackerYou. Learn more about Drew on his site drewminns! and connect with him on Twitter, Dribbble and GitHub.
The post How to Use Gulp appeared first on Six Revisions.
Related Posts
December 6, 2021
7+ Web Design Trends for 2022: Which Will You Use?
December 6, 2021
The 10 Best WordPress Booking Plugins to Use On Your Website
December 6, 2021
How to Use a Web Cache Viewer to View a Cached Page
November 6, 2021
10 Modern Web Design Trends for 2022
November 6, 2021
Best Free SSL Certificate Providers (+ How to Get Started)
November 6, 2021
How to Design a Landing Page That Sends Conversions Skyrocketing
November 6, 2021
What Are the Best WordPress Security Plugins for your Website?
October 6, 2021
Your Guide to How to Buy a Domain Name
October 6, 2021
How to Build a WordPress Website: 9 Steps to Build Your Site
September 6, 2021
10 Best Websites for Downloading Free PSD Files
September 6, 2021
HTML5 Template: A Basic Code Template to Start Your Next Project
September 6, 2021
How Much Does It Cost to Build a Website for a Small Business?
September 6, 2021
A List of Free Public CDNs for Web Developers
September 6, 2021
6 Advanced JavaScript Concepts You Should Know
August 6, 2021
10 Simple Tips for Launching a Website
August 6, 2021
25 Beautiful Examples of “Coming Soon” Pages
August 6, 2021
10 Useful Responsive Design Testing Tools
August 6, 2021
Best-Converting Shopify Themes: 4 Best Shopify Themes
July 6, 2021
What Is Alt Text and Why Should You Use It?
July 6, 2021
24 Must-Know Graphic Design Terms
June 6, 2021
How to Design a Product Page: 6 Pro Design Tips
April 6, 2021
A Beginner’s Guide to Competitor Website Analysis
April 6, 2021
6 BigCommerce Design Tips For Big Ecommerce Results
April 6, 2021
Is WordPress Good for Ecommerce? [Pros and Cons]
March 6, 2021
Make Websites Mobile-Friendly: 5 Astounding Tips
March 6, 2021
Shopify vs. Magento: Which Platform Should I Use?
March 6, 2021
Top 5 Web Design Tools & Software Applications
February 6, 2021
Website Optimization Checklist: Your Go-To Guide to SEO
February 6, 2021
5 UX Design Trends to Dazzle Users in 2021
February 6, 2021
What Is the Average Page Load Time and How Can You Do Better?
February 6, 2021
Choosing an Ecommerce Platform That Will Wow Customers
February 6, 2021
7 Best Practices for Crafting Landing Pages with Forms
February 6, 2021
7 B2B Web Design Tips to Craft an Eye-Catching Website
January 6, 2021
Mobile-Friendly Checker | Check Your Site’s Mobile Score Now
January 6, 2021
8 Tips for Developing a Fantastic Mobile-Friendly Website
December 6, 2020
How to Add an Online Store to Your Website [4 Ways]
December 6, 2020
5 UX Design Tips for Seamless Online Shopping
November 6, 2020
Ecommerce Website Essentials: Does Your Site Have All 11?
November 6, 2020
5 Small Business Website Essentials You Need for Your Site
November 6, 2020
Your Website Redesign Checklist for 2020: 7 Steps for Success
May 1, 2020
Psychology of Color [Infographic]
April 21, 2020
How to start an online store that drives huge sales
January 3, 2020
5 Lead Generation Website Design Best Practices
March 6, 2019
6 Reasons You Should Redesign Your Website in 2019
March 6, 2019
7 Web Design Trends for 2019
February 19, 2019
Who owns the website/app source code, client or developer
February 7, 2019
Don’t Let Your Domain Names Expire in 2019
January 8, 2019
2019 Website Development Trends To Note
October 6, 2017
How Web Design Impacts Content Marketing
October 6, 2017
How to Choose a Navigation Setup
August 6, 2017
Why User Experience Matters to Marketing
July 6, 2017
5 Ways Web Design Impacts Customer Experience
September 6, 2016
How to Learn Angular
September 6, 2016
The Excuses for Not Having a Website (Infographic)
September 6, 2016
How to Build an Award-Winning Web Design Team
September 6, 2016
13 Free Data Visualization Tools
August 6, 2016
How Selling Pastries Helped Us Design a Better Product
August 6, 2016
11 Sites to Help You Find Material Design Inspiration
July 4, 2016
How to change free wordpress.com url
April 6, 2016
The 5 Best Free FTP Clients
April 6, 2016
7 Free UX E-Books Worth Reading
March 6, 2016
Can Handwritten Letters Get You More Clients?
December 10, 2015
Star Wars Week: How to create your own Star Wars effects for free
December 6, 2015
20 "Coming Soon" Pages for Inspiration
December 6, 2015
6 Free Tools for Creating Your Own Icon Font
December 6, 2015
9 Useful Tools for Creating Material Design Color Palettes
November 6, 2015
20 Free UI Kits to Download
November 6, 2015
50 Web Designs with Awesome Typography
November 6, 2015
When to Use rel="nofollow"
November 6, 2015
7 Free Books That Will Help You Become More Productive
November 6, 2015
50 Beautiful One-Page Websites for Inspiration
November 6, 2015
Circular Images with CSS
October 6, 2015
Lessons Learned from an Unsuccessful Kickstarter
October 6, 2015
5 Games That Teach You How to Code
October 6, 2015
Cheatsheet: Photoshop Keyboard Shortcuts
October 6, 2015
An Easy Way to Create a Freelance Contract for Your Projects
October 6, 2015
50 Design Agency Websites for Inspiration
September 29, 2015
JB Hi-Fi shutting the book on ebooks
September 24, 2015
Opinion: Quick, Quickflix: It's time to give yourself the flick
September 24, 2015
New Star Wars 360-degree video is among first on Facebook
September 21, 2015
Apple purges malicious iPhone and iPad apps from App Store
September 12, 2015
Apple's new Live Photos feature will eat up your storage
September 12, 2015
The latest Windows 10 Mobile preview has been delayed
September 12, 2015
IBM buys StrongLoop to add Node.js development to its cloud
September 8, 2015
Fake Android porn app takes your photo, then holds it ransom
September 6, 2015
50 Restaurant Websites for Inspiration
September 6, 2015
Zero UI — The Future of Interfaces
September 6, 2015
50 Beautiful Websites with Big Background Images
September 6, 2015
Infographic: 69 Web Design Tips
September 6, 2015
Free Windows 10 Icons
September 2, 2015
Instagram turns itself into a genuine messaging service
August 11, 2015
In Depth: How Microsoft taught Cortana to be more human
August 11, 2015
Windows 10 price, news and features
August 11, 2015
Windows 10's broken update introduces endless reboot loop
August 11, 2015
Windows 10 races to 27m installs
August 11, 2015
Windows 10 IoT Core gets first public release
August 10, 2015
iOS Tips: How to backup iPhone to an external drive
August 10, 2015
Windows 8.1 RT finally getting Windows 10 Start Menu
August 10, 2015
How to use Windows Hello
August 10, 2015
Review: Moto Surround
August 10, 2015
Review: Moto G (2015)
August 9, 2015
8 of the best free VPN services
August 8, 2015
Use Firefox? Mozilla urges you update ASAP
August 7, 2015
Mac Tips: Apple Mail: How to remove the Favorites Bar
August 7, 2015
How to make the OS X dock appear faster
August 7, 2015
Review: BQ Aquaris E45 Ubuntu Edition
August 7, 2015
Review: Acer Liquid Jade Z
August 6, 2015
How to reinstall Linux
August 6, 2015
How to reinstall Windows
August 6, 2015
Updated: Apple Music: release date, price and features
August 6, 2015
Social News Websites for Front-End Developers
August 6, 2015
10 Free JavaScript Books
August 6, 2015
50 Beautiful Blog Designs
August 6, 2015
Animated SVG Pipes Effect
August 6, 2015
Launching Your First App
August 5, 2015
Windows 10 goes freemium with paid apps
August 5, 2015
Updated: Week 1 with Windows 10
August 5, 2015
Mac Tips: How to manage Safari notifications on Mac
August 5, 2015
Microsoft Sway may kill the PowerPoint presentation
August 4, 2015
Microsoft gives Outlook on the web a new look
August 4, 2015
Mac OS X vulnerable to new zero-day attack
August 4, 2015
Windows 10 users warned of two scams
August 4, 2015
Microsoft's Docs.com is now available to everyone
August 3, 2015
Mac Tips: How to edit the Favorites sidebar on Mac
August 3, 2015
Updated: Windows 10 price, news and features
July 29, 2015
Review: HP ProDesk 405 G2
July 29, 2015
Hands-on review: HP Elite x2 1011
July 29, 2015
Hands-on review: Updated: Windows 10 Mobile
July 29, 2015
Review: Updated: Nvidia Shield Android TV
July 28, 2015
LIVE: Windows 10 launch: Live Blog!
July 28, 2015
How to prepare for your upgrade to Windows 10
July 28, 2015
Review: Updated: Windows 10
July 28, 2015
Review: Updated: HP Pro Tablet 608
July 28, 2015
Review: Heat Genius
July 28, 2015
Hands-on review: Moto X Play
July 28, 2015
Hands-on review: Moto X Style
July 28, 2015
Hands-on review: Moto G (2015)
July 28, 2015
Review: 13-inch MacBook Air (early 2015)
July 28, 2015
Hands-on review: OnePlus 2
July 28, 2015
Review: LG 65EG960T 4K OLED
July 28, 2015
Mac Tips: How to share printers on Mac
July 27, 2015
Apple Music's arrival hasn't opened Pandora's box
July 26, 2015
Review: Garmin Swim
July 25, 2015
How to merge OS X contacts into an existing list
July 25, 2015
Hands-on review: UPDATED: ZTE Axon
July 24, 2015
Mac Tips: How to zoom in on a Mac
July 24, 2015
What Windows 10 means for the enterprise
July 24, 2015
Review: JBL Charge 2 Plus
July 24, 2015
Review: Acer Aspire S7
July 24, 2015
Review: Updated: Canon G3 X
July 24, 2015
Review: Updated: iPad Air 2
July 24, 2015
Review: Thinksound On1
July 24, 2015
Review: Asus Chromebook Flip
July 24, 2015
Review: Garmin Forerunner 225
July 23, 2015
Review: Garmin nuvi 68LM
July 23, 2015
Review: Samsung Galaxy S6 Active
July 23, 2015
Review: Bowers and Wilkins P5 Wireless
July 23, 2015
Review: Dell XPS 15 (2015)
July 21, 2015
Review: Fuji S9900W
July 21, 2015
Review: Updated: Fitbit Surge
July 21, 2015
Review: UE Roll
July 21, 2015
Hands-on review: Ubik Uno
July 20, 2015
Review: Samsung HW-J650
July 20, 2015
Updated: 40 best Android Wear smartwatch apps 2015
July 20, 2015
Review: Acer Chromebook C740 review
July 20, 2015
Review: Huawei Talkband B2
July 20, 2015
Review: Dell Venue 10 7000
July 20, 2015
Review: Intel Core i7-5775C
July 17, 2015
Mac Tips: How to delete locked files on Mac
July 17, 2015
Review: Pebble Time
July 16, 2015
Microsoft just made Windows XP even less secure
July 16, 2015
Windows 8.1 RT is getting an update this September
July 16, 2015
OS showdown: Windows 10 vs Windows 8.1 vs Windows 7
July 16, 2015
Review: Acer CB280HK
July 15, 2015
Windows 10 is ready for new laptops and PCs
July 15, 2015
Explained: How to take a screenshot in Windows
July 15, 2015
Office for Windows 10 appears in latest build
July 14, 2015
Review: ZTE Axon
July 14, 2015
Review: ViewSonic VP2780-4K
July 14, 2015
Hands-on review: SanDisk Connect Wireless Stick
July 14, 2015
Review: Oppo PM-3
July 14, 2015
Review: BT 11ac Dual-Band Wi-Fi Extender 1200
July 14, 2015
Review: Fuji X-T10
July 13, 2015
How to build an SEO strategy for your business
July 13, 2015
Review: Lenovo ThinkPad Yoga 15
July 13, 2015
Review: Audio-Technica ATH-MSR7
July 13, 2015
Review: Garmin NuviCam LMT-D
July 13, 2015
Review: Dell Inspiron 13 7000
July 13, 2015
Hands-on review: AstroPi SenseHAT
July 13, 2015
Hands-on review: EE Rook
July 13, 2015
Hands-on review: Updated: HTC Vive
July 12, 2015
Here's the ultimate software list for PC fanatics
July 10, 2015
How to use the new Photos app for Mac
July 10, 2015
Windows 10 Insider Preview Build 10166 available now
July 10, 2015
Splunk spends big on cybersecurity acquisition
July 10, 2015
Making Windows 10 apps just got a whole lot easier
July 10, 2015
Review: Lenovo LaVie Z 360
July 9, 2015
OS X El Capitan public beta available right now
July 9, 2015
Microsoft finally unveils Office 2016 for Mac
July 9, 2015
Review: Updated: Chromecast
July 9, 2015
Review: Updated: Tesco Hudl 2
July 9, 2015
Review: Lenovo ThinkPad E550
July 9, 2015
Review: Updated: Google Nexus 6
July 8, 2015
What you need to know about Windows Server 2016
July 7, 2015
Microsoft to hike enterprise cloud pricing
July 6, 2015
Hacking Team end up being totally 0wned
July 6, 2015
Review: HP Pro Slate 12
July 6, 2015
Review: Samsung 850 Pro 2TB
July 6, 2015
Review: Asus RT-AC87U
July 6, 2015
Review: Jawbone UP2
July 6, 2015
Reimagining the Web Design Process
July 6, 2015
50 Clean Websites for Inspiration
July 6, 2015
15 Free Books for People Who Code
July 6, 2015
Web Storage: A Primer
July 6, 2015
A Look at Some CSS Methodologies
July 3, 2015
6 Essential Mac Mouse and Trackpad Tips
July 2, 2015
How to install a third party keyboard on Android
July 2, 2015
Review: UPDATED: Asus Zenfone 2
July 2, 2015
Review: Alienware 13
July 2, 2015
Review: HP DeskJet 1010
July 1, 2015
5 issues we want Apple Music to fix
June 13, 2015
Cortana will get its own button on Windows 10 PCs
June 12, 2015
Windows 10 will come with universal Skype app
June 12, 2015
iPad music production: 18 Best apps and gear
June 12, 2015
Windows 10 all set for early enterprise struggle
June 12, 2015
Review: Garmin VIRB Elite
June 11, 2015
Review: Updated: Nvidia Shield Tablet
June 11, 2015
Review: Nokia Lumia 635
June 10, 2015
Microsoft brings more online tweaks to Office 365
June 10, 2015
Mac Tips: How to use Screen Sharing in Mac OS X
June 9, 2015
Hands-on review: Meizu M2 Note
June 9, 2015
Hands-on review: EE 4GEE Action Camera
June 9, 2015
Review: Toshiba 3TB Canvio external hard drive
June 9, 2015
Review: Olympus SH-2
June 8, 2015
Hands-on review: Updated: Apple CarPlay
June 8, 2015
UPDATED: iOS 9 release date, features and news
June 8, 2015
Review: Updated: Roku 2
June 8, 2015
Review: Updated: PlayStation Vue
June 8, 2015
Review: Dell PowerEdge R730
June 8, 2015
Review: Canon SX710 HS
June 7, 2015
UPDATED: iOS 9 release date, features and rumors
June 7, 2015
Review: Lenovo S20-30
June 6, 2015
Free Writing Icons
June 6, 2015
15 CSS Questions to Test Your Knowledge
June 6, 2015
The Best CSS Reset Stylesheets
June 6, 2015
How CSS Specificity Works
June 5, 2015
'Delay' is a new feature in Windows 10
June 5, 2015
Review: Beyerdynamic Custom One Pro Plus
June 5, 2015
Latest SEO Marketing tools
June 5, 2015
Review: Nvidia Shield Android TV
June 5, 2015
Review: Honor 4X
June 5, 2015
Review: In Depth: Oppo R5
June 3, 2015
Hands-on review: Huawei P8 Lite
June 3, 2015
How To: How to create eBooks on a Mac
June 3, 2015
Review: Updated: Tidal
June 3, 2015
Review: Canon 750D (Rebel T6i)
June 2, 2015
Review: Updated: Asus ZenWatch
June 2, 2015
Review: Alcatel OneTouch Idol 3
June 2, 2015
Review: Updated: Nokia Lumia 1520
June 2, 2015
Review: Updated: Yotaphone 2
June 2, 2015
Review: Updated: Nokia Lumia 625
June 2, 2015
Review: Creative Muvo Mini
June 1, 2015
Review: Acer TravelMate P645 (2015)
June 1, 2015
Hands-on review: Corsair Bulldog
May 29, 2015
In Depth: NetApp: a requiem
May 29, 2015
July is looking definite for Windows 10 release
May 29, 2015
Hands-on review: Google Photos
May 28, 2015
Mac Tips: The 16 best free GarageBand plugins
May 28, 2015
Review: Canon 760D (Rebel T6s)
May 27, 2015
Review: Lenovo Yoga 3 14
May 27, 2015
Hands-on review: Serif Affinity Photo
May 27, 2015
Review: Garmin Vivoactive
May 26, 2015
Review: Datacolor Spyder5 Elite
May 26, 2015
Hands-on review: Sony Xperia Z3+
May 26, 2015
Review: Epson BrightLink Pro 1410Wi
May 26, 2015
Review: Technics Premium C700
May 26, 2015
Review: Canon EOS M3
May 26, 2015
Review: Updated: HTC One M9
May 26, 2015
Review: Updated: Sony Xperia Z3 Compact
May 25, 2015
Review: Updated: New Nintendo 3DS
May 25, 2015
Updated: 50 best Mac tips, tricks and timesavers
May 25, 2015
Updated: Windows email: 5 best free clients
May 25, 2015
Instagram is planning to invade your inbox
May 25, 2015
Review: Updated: Foxtel Play
May 24, 2015
How Windows 10 will change smartphones forever
May 24, 2015
Review: Vodafone Smart Prime 6
May 24, 2015
Review: Updated: iPad mini
May 22, 2015
Office Now may be Cortana for your work life
May 22, 2015
Review: Updated: Lenovo Yoga 3 Pro
May 22, 2015
Review: Microsoft Lumia 640 LTE
May 22, 2015
Review: Updated: Fitbit Flex
May 21, 2015
Updated: Best free Android apps 2015
May 21, 2015
Review: Asus ZenBook Pro UX501
May 21, 2015
Review: Sennheiser Momentum In-Ear
May 20, 2015
Hands-on review: UPDATED: Asus Zenfone 2
May 20, 2015
OS X 10.11 release date, features and rumors
May 18, 2015
Updated: Best free antivirus software 2015
May 18, 2015
iPhone 6S rumored to launch as soon as August
May 18, 2015
Microsoft ready to pounce and acquire IFS?
May 17, 2015
5 of the most popular Linux gaming distros
May 16, 2015
Review: Acer Chromebook 15 C910
May 16, 2015
Review: Lenovo ThinkPad X1 Carbon (2015)
May 16, 2015
Review: Polk Nue Voe
May 16, 2015
The top 10 data breaches of the past 12 months
May 16, 2015
Hands-on review: Updated: LG G4
May 16, 2015
Review: Updated: Quickflix
May 16, 2015
Review: LG Watch Urbane
May 16, 2015
Review: Razer Nabu X
May 16, 2015
Hands-on review: Updated: Windows 10
May 16, 2015
Review: UPDATED: Moto X
May 16, 2015
Review: Updated: Moto G (2013)
May 12, 2015
Review: TomTom Go 50
May 12, 2015
Review: Updated: Moto G (2014)
May 12, 2015
Review: Garmin Vivofit 2
May 12, 2015
Review: Asus Transformer Book Flip TP300LA
May 11, 2015
Review: MSI GT80 Titan
May 11, 2015
Review: Monster SuperStar BackFloat
May 9, 2015
Review: Updated: Apple Watch
May 7, 2015
5 million internet users infected by adware
May 7, 2015
Review: Updated: New MacBook 2015
May 6, 2015
Android M will be shown at Google IO 2015
May 6, 2015
Review: Epson WorkForce Pro WF-4630
May 6, 2015
Review: Master & Dynamic MH40
May 6, 2015
Getting Started with Command-Line Interfaces
May 6, 2015
What It’s Like to Contribute to WordPress
May 6, 2015
Ultimate Guide to Link Types for Hyperlinks
May 6, 2015
11 Things You Might Not Know About jQuery
May 5, 2015
Hands-on review: Updated: PlayStation Now
May 5, 2015
Review: Lenovo ThinkPad Yoga 12
May 5, 2015
Review: Updated: iPad Air
May 5, 2015
Review: Panasonic SZ10
May 5, 2015