{"id":9456,"date":"2015-10-20T16:38:00","date_gmt":"2015-10-20T20:38:00","guid":{"rendered":"http:\/\/www.analystik.ca\/blogue\/?p=9456"},"modified":"2017-05-26T14:12:37","modified_gmt":"2017-05-26T18:12:37","slug":"how-to-use-gulp-on-mac-windows-linux","status":"publish","type":"post","link":"https:\/\/analystik.ca\/blogue\/language\/en\/how-to-use-gulp-on-mac-windows-linux\/","title":{"rendered":"How to use Gulp on Mac Windows & Linux"},"content":{"rendered":"

Gulp plugin is a task runner. For example, you can easily: transform your Sass<\/a> (or Less<\/a>) files in css files, minify them, using autoprefixer, join them in 1 files, check your JavaScript files with jsLint<\/a> and much more. If you code a little bit it can be really useful. It is one of my favourite tools for my web site development and it is totally free. It might be a little frightening at the beginning but with some practice and courage, it is easier than it looks.<\/p>\n

<\/p>\n

GRUNT?<\/strong><\/h2>\n

Both will do exactly the same thing but not the same way. Grunt<\/a>\u00a0is older and a bit slower. However, Grunt has more plugins than Gulp.
\nFor the time being, Grunt holds more \u00ab\u00a0market share\u00a0\u00bb in the community. But if you like configuring everything, considering all its plugins, Grunt is your tool.
\nGrunt executes each task one by one. Then, once the task is done it will save it into a temp file. When you need to work with it again, it will retrieve it perform the task then save it in a temp file again and delete the temp file when it is over.
\nGulp plugin does it in streams. So, you can run a lot of tasks and ask it to create a new file, once all tasks are over.<\/p>\n

For example: we will transform a sass file in css and minify it at the end.<\/p>\n

Gulp PLUGIN will:<\/h5>\n
    \n
  1. Open the file<\/li>\n
  2. Transform it in css<\/li>\n
  3. Minify it<\/li>\n
  4. Save the file where you want<\/li>\n<\/ol>\n
    Grunt will:<\/h5>\n
      \n
    1. Open the file then change it into a css\u00a0<\/em><\/li>\n
    2. Save the file in \/temp<\/em><\/li>\n
    3. Open the file in \/temp<\/em><\/li>\n
    4. Minify it<\/li>\n
    5. Save the file in \/temp<\/em><\/li>\n
    6. Open the file in \/temp<\/em><\/li>\n
    7. Save the file where you want<\/li>\n
    8. Erase the \/temp file<\/em><\/li>\n<\/ol>\n

      How to install:<\/strong><\/h2>\n

      At first you need node.js<\/a>. There are different versions for Windows, Mac and Linux. You need to install npm. To know, if your are all set, just type in \u00ab\u00a0terminal\u00a0\u00bb or \u00ab\u00a0cmd\u00a0\u00bb:<\/p>\n

      npm -v<\/pre>\n
      If you get an error you need to start it over.
      \nFirst step is to install Gulp plugin globally. If you are in Windows you can ignore the \u00ab\u00a0sudo\u00a0\u00bb. On Linux or Mac, it will ask you to enter a password that it wont actually show.<\/p>\n
      sudo npm install gulp -g<\/pre>\n
      After, you need to go into your project folder. In \u00ab\u00a0terminal\u00a0\u00bb or \u00ab\u00a0cmd\u00a0\u00bb type:<\/p>\n
      npm init\r\n<\/pre>\n
      It will ask for your project name. After, you can skip all other questions by pressing the enter key. At the end, type:\u00a0\u00bbyes\u00a0\u00bb to confirm the process. In the folder it will create a package.json file that will be needed during the installation.<\/p>\n
      Now, you will install Gulp with some plugins into that folder. There will be a lot of messages during the installation but if you don’t see any error your good to go (if you see \u00ab\u00a0warn\u00a0\u00bb it’s also good).In this example, I will install all plugins to transform sass to css, but feel free to do more tasks and install more plugins. Check them on npmjs.com.<\/a><\/p>\n
      npm install gulp --save-dev<\/pre>\n
      npm install gulp-sass@2.1.0-beta –save-dev npm install gulp-autoprefixer –save-dev npm install gulp-minify-css<\/p>\n
      Just put \u00ab\u00a0terminal\u00a0\u00bb or \u00ab\u00a0cmd\u00a0\u00bb aside we will use it at the end.<\/p>\n
      The\u00a0gulpfile.js\u00a0<\/strong><\/h2>\n
      This file is in Javascript and, by chance, really easy to understand and so, to program as well. It will be used to make the task we want. In my example here you can see my structure:<\/p>\n
      index.html\r\n|node_modules\r\n|- css\r\n|- sass\r\n   |- style.scss\r\ngulpfile.js\r\npackage.json\r\n<\/pre>\n
      When I did \u00ab\u00a0npm init\u00a0\u00bb it created a file called \u00ab\u00a0package.json\u00a0\u00bb and a: \u00ab\u00a0node_modules\u00a0\u00bb\u00a0folder.<\/p>\n
      We need to create a file called\u00a0\u00ab\u00a0gulpfile.js\u00a0\u00bb\u00a0(exactly without the quotes)
      \nOur first task it’s to program the \u00ab\u00a0requires\u00a0\u00bb. We will create variables for the name as our tasks with the plugins installed. It looks like that:<\/p>\n
      var gulp = require('gulp');<\/pre>\n
      var sass = require(‘gulp-sass’); var autoprefix = require(‘gulp-autoprefixer’); var minify = require(‘gulp-minify-css’);<\/p>\n
      We create the first task:\u00a0\u00bbdefault\u00a0\u2014\u00a0watch\u00a0\u00bb<\/em><\/p>\n
      gulp.task('default', function(){\r\n\tgulp.watch('sass\/**\/*.scss', ['css']);\r\n});\r\n<\/code><\/pre>\n
      Gulp.watch checks our files and if there are any change, it runs a task (In this case, \u00ab\u00a0css\u00a0\u00bb). It looks-up all sass files in the sass folder and its children folders. The task css must be created:<\/p>\n
      gulp.task('css', function(){\r\n\tgulp.src('sass\/style.scss')\r\n\t\t.pipe(sass())\r\n\t\t.pipe(autoprefix({\r\n                   browsers: ['last 2 ie versions'],\r\n                   cascade: false\r\n                   })\r\n                 )\r\n                 .pipe(minify())\r\n       .pipe(gulp.dest('css\/'))\r\n\t\r\n});\r\n<\/code><\/pre>\n
      We simply add \u00ab\u00a0.pipe\u00a0\u00bb with the name variable created on top of the file.
      \nTo run all the processes just write in \u00ab\u00a0terminal\u00a0\u00bb or \u00ab\u00a0cmd\u00a0\u00bb:<\/p>\n
      gulp<\/pre>\n
      The watch task will run until we press \u00ab\u00a0control+c\u00a0\u00bb, when css is edited, it continues to watch anyway.
      \nIf there is no error, when you save any scss file, (in this case) style.css will be created in the css folder. If not, check the gulpfile.js.<\/p>\n
      All code:<\/strong><\/h2>\n
      In \u00ab\u00a0terminal\u00a0\u00bb or \u00ab\u00a0cmd\u00a0\u00bb:<\/h4>\n
      sudo npm install gulp -g<\/pre>\n
      \/* in your project folder *\/ npm init \/* npm install gulp-*plugin name* –save-dev *\/ npm install gulp –save-dev npm install gulp-sass@2.1.0-beta –save-dev npm install gulp-autoprefixer –save-dev npm install gulp-minify-css –save-dev \/* run gulp *\/ gulp<\/p>\n
      The\u00a0gulpfile.js:<\/h4>\n
      var gulp = require('gulp');\r\nvar sass = require('gulp-sass');\r\nvar autoprefix = require('gulp-autoprefixer');\r\nvar minify = require('gulp-minify-css');\r\n\r\ngulp.task('default', function(){\r\n\tgulp.watch('sass\/**\/*.scss', ['css']);\r\n});\r\n\r\ngulp.task('css', function(){\r\n\tgulp.src('sass\/style.scss')\r\n\t\t.pipe(sass())\r\n\t\t.pipe(autoprefix({\r\n            browsers: ['last 2 ie versions'],\r\n            cascade: false\r\n        }))\r\n       \r\n        .pipe(minify())\r\n\t\t.pipe(gulp.dest('css\/'))\r\n\t\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"
      Gulp plugin is a task runner. For example, you can easily: transform your Sass (or Less) files in css files, minify them, using autoprefixer, join them in 1 files, check your JavaScript files with jsLint and much more. If you code a little bit it can be really useful. It is one of my favourite…  Read more »<\/a><\/p>\n","protected":false},"author":3,"featured_media":11649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"How to use Gulp plugin on Mac, Windows & Linux platform","_seopress_titles_desc":"Gulp is a task runner. See how to use Gulp plugin on MacOSX, Linux and Windows. It show you how to use it in command lines on these platforms.","_seopress_robots_index":"","content-type":"","footnotes":""},"categories":[2579,3425,3417,3413],"tags":[1355,1370,2997,1372,1374,1001,3129,3146],"better_featured_image":{"id":11649,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":2000,"height":1125,"file":"2015\/10\/gulp_tutorial.jpg","sizes":{"thumbnail":{"file":"gulp_tutorial-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-150x150.jpg"},"medium":{"file":"gulp_tutorial-300x169.jpg","width":300,"height":169,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-300x169.jpg"},"medium_large":{"file":"gulp_tutorial-768x432.jpg","width":768,"height":432,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-768x432.jpg"},"large":{"file":"gulp_tutorial-1024x576.jpg","width":1024,"height":576,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-1024x576.jpg"},"bones-thumb-1920":{"file":"gulp_tutorial-1920x1125.jpg","width":1920,"height":1125,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-1920x1125.jpg"},"bones-thumb-1536":{"file":"gulp_tutorial-1536x1016.jpg","width":1536,"height":1016,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-1536x1016.jpg"},"bones-thumb-960":{"file":"gulp_tutorial-960x635.jpg","width":960,"height":635,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-960x635.jpg"},"bones-thumb-600":{"file":"gulp_tutorial-600x397.jpg","width":600,"height":397,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-600x397.jpg"},"bones-thumb-300":{"file":"gulp_tutorial-300x199.jpg","width":300,"height":199,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-300x199.jpg"},"post-thumbnail":{"file":"gulp_tutorial-125x125.jpg","width":125,"height":125,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-125x125.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":9456,"source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial.jpg"},"_links":{"self":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9456"}],"collection":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/comments?post=9456"}],"version-history":[{"count":12,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9456\/revisions"}],"predecessor-version":[{"id":11683,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9456\/revisions\/11683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/media\/11649"}],"wp:attachment":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/media?parent=9456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/categories?post=9456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/tags?post=9456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}