Installing Gulp.js

Installing Gulp.js

Gulp.js is an open source JavaScript toolkit that is used for front-end tasks such as

  • converting SASS/LESS to CSS (browsers cannot read SASS/LESS files and therefore they have to be converted to CSS)
  • reloading browsers automatically when files are saved
  • optimising CSS,HTML, JavaScript and images
  • and many more

To use gulp.js, you have to have Node.js installed on your machine. To install Node.js, follow my tutorial.

When you have Node.js installed on your machine, install Gulp.js by typing the following command into command line and press enter

npm install gulp -g

The

 npm install

command used is a command that uses Node Package Manager (npm) to install Gulp onto your machine.

The

 -g

flag in this command tells npm to install Gulp globally onto your machine. This allows you to use the gulp command anywhere on your system.

Once you press enter, the installation will start. After installation you should see the line saying what version of gulp has been installed (in my case it is gulp 3.9.1) – Untitled.png

Don’t mind error messages asking to update version of minimatch as there is not much you can do about it. If you want to check what version of minimatch you have installed, type the following command into command line –

npm view minimatch version

If there is lower version than 3.0.2 installed, type the following command into command line –

npm install -g minimatch

Untitled.png

Now, there is appropriate version installed, so if you type this command again –

npm view minimatch version

you will get the right version of minimatch –
Untitled.png

Gulp.js is successfully installed on your computer and is ready to be used.

Install Node.js and NPM on Windows

Install Node.js and NPM on Windows

Node.js is useful javascript that makes developing websites much simpler. This means that by installing Node.js on your machine, you can quickly convert SASS to CSS, make HTML, JavaScript and graphic files smaller. By installing NPM on your machine, you can add many useful Node modules that will make your development work simpler. To find thousands of free packages to download, visit www.npmjs.com

To be able to work with Node.js, you must be type command line instructions therefore you must be comfortable with using command prompt, git shell etc.
If you are not comfortable with this, don’t worry just give it a go, everybody must start somewhere! I’ll walk you through simple installation process and if you would like to learn more, just follow my blog for more posts.

Download and install

  1. Download node.js
  2. Run the installer (the file you just downloaded)
  3. Follow the instructions (Accept the license agreement, click the NEXT button a few times and accept the default installation settings).
  4. This is the success message – Untitled.png
  5. Once it’s installed, you should get this folder structure in Start –Untitled.png
  6. After installation, you have to restart computer to be able to use Node.js

Test it!

Test Node

To check if node.js is really working, open Node.js command prompt by clicking on the icon –

Type

node -v

This should give you installed version of Node.js such as v6.11.0 in my case –

There is also message at the top of the command prompt saying ‘Your environment has been set up for using Node.js 6.11.0 (x64) and npm.’ proving that we installed everything successfully.

Test NPM

To check if NPM is installed, type

npm -v

This should give you installed version of NPM such as 3.10.10 in my case –
0

Uninstalling Node.js and NPM

To uninstall Node.js and NPM –

  1. Open the Windows Control Panel
  2. Click the “Uninstall a program” option in “Programs”
  3. Select Node.js, and click the Uninstall link.

Download and install NPM package

Visit www.npmjs.com and find the package you would like to install by typing it to search bar on the top of the website –

Once you choose package you’d like to install, follow the instructions on the page.
(I’ll be using gulp-sass-themes package)

On the page, there are instructions what to do next – type

npm install gulp-sass-themes gulp-sass --save-dev

and press enter. Installation is in the process and all you have to do is wait for the installation to finish.

Once it’s done, you don’t need to do anything as it’s all installed for you.
When installation is running, NPM creates a folder named “node_modules”, where the package will be placed. All installed packages will be placed in this folder.

The project has a folder structure like this:

C:\Users\veronika\node_modules\name-of-the-package

Download and installation of Magento 1.9.3.0

Download

To download Magento 1.9.3.0 installation files, go to https://magento.com/ . In the top menu, go to Products & Solutions > Products > Community Edition. Click on ‘Download now’ button in the middle of the screen

This button takes you to different page where you click on ‘Release archive’ button. First option is to download 2x version of Magento but we don’t want that for this tutorial.

Scroll down until you can see ver 1.9x and download required version of Magento. For this tutorial, it is 1.9.3.0 version.

Select the format (.zip) and press download. If you already have an account created for magento.com website, log in with your details. Otherwise please register and continue with your download.

Once the .zip file is downloaded, extract it and you will see extracted folder above .zip file.

File structure

This is the file structure of Magento 1.9.3.0 –

Installation

Setting server up and creating database

Installation is going to take place on XAMPP local PHP development environment. So if you haven’t got it installed or not sure what it really is, please follow my link here.

Start XAMPP and go to phpMyAdmin section by clicking on ‘Admin’ next to MySQL option –

Create database and leave it empty.

Click on New button –

Type name of database and click create –

That is it. New empty database is created. Don’t do anything else here!

Moving files

Open XAMPP files by clicking on ‘Explorer’ –

This is structure of XAMPP files –

The only folder that we are working with is ‘htdocs’ as this is where all our files are stored.

Open the ‘htdocs’ folder, copy and paste full extracted Magento .zip folder here.
Now it is time to run the installation.

Running installation

Open browser of your choice (I’m going to use Chrome). As this is run on local server, URL needs to be http://127.0.0.1/NAME-OF-YOUR-FOLDER-IN-HTDOCS/ – 127.0.0.1 is address of localhost and after ‘/’ you must type name of folder that is in ‘htdocs’ to define path.

This is Welcome screen of Magento installation –

Tick that you agree with terms and conditions and then ‘Continue’ button.

Choose location, time zone and currency and press ‘Continue’ button –

Configuration window –
Host – localhost
Database name – type name of your created database
Username – root (default username for database as we work with XAMPP)
User Password – leave blank (there is no password for databases in XAMPP)
Table Prefix – leave blank

Once you complete all these details, there are more details to fill in bellow –
Base URL address type – http://127.0.0.1/NAME-OF-YOUR-FOLDER-IN-HTDOCS/
Admin path – admin
Tick Enable Charts and press ‘Continue’ button.

After clicking on ‘Continue’ button, Magento is adding tables into your database therefore this step is going to take awhile but don’t panic, wait until it is all done and next screen is visible – DO NOT PRESS ANYTHING! (if you do, it will mess with the installation!)

Next step is to create admin account so fill in all details and make sure to make note of them for the future. Leave ‘Encryption Key’ blank and press ‘Continue’ –

That is it, Magento is installed and ready to be used. Make a copy of encryption password that is generated and go either to frontend or backend of your newly installed Magento 1.9.3.0 –

 

 

New website – check it out!

Check out my portfolio website –http://www.veronikalesnakova.co.uk/

If you like what you see and you have a project in mind then I’m happy to hear from you.

Hello

Welcome to my blog everyone!

On this blog you will find everything about my university work. I’m probably going to add something new every day so keep checking it 🙂