{"id":3954,"date":"2015-06-27T23:50:59","date_gmt":"2015-06-28T03:50:59","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3954"},"modified":"2015-07-02T16:56:34","modified_gmt":"2015-07-02T20:56:34","slug":"node-js-and-gulp-js-basics","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/node-js-and-gulp-js-basics\/","title":{"rendered":"Node.js and Gulp.js Basics"},"content":{"rendered":"<h2>Node.js<\/h2>\n<ol>\n<li>Install <a href=\"http:\/\/nodejs.org\" target=\"_blank\">npm<\/a> globally if you don&#8217;t already have it (check versions with <span class=\"code\">node -v<\/span> and <span class=\"code\">npm -v<\/span>)<\/li>\n<li>Run <span class=\"code\">npm init<\/span>\u00a0command to initialize the\u00a0package.json file to\u00a0provide information about the\u00a0project and help manage the\u00a0dependencies&#8230; example&#8230;\n<pre>{\r\n    \"name\": \"my_project\",\r\n    \"version\": \"0.0.0\",\r\n    \"devDependencies\": {\r\n        \"gulp\": \"~3.8.8\"\r\n    },\r\n    \"dependencies\": {\r\n        \"jquery\": \"~2.1.3\",\r\n        \"react\": \"~0.13.1\"\r\n    }\r\n}<\/pre>\n<ul>\n<li>devDependencies: These are the dependencies that are only intended for development and testing of your module. The dependencies will be installed automatically unless the NODE_ENV=production environment variable has been set. If this is the case you can still install these packages using <span class=\"code\">npm install &#8211;dev<\/span><\/li>\n<li>dependencies: An object which contains the dependencies of your package; automatically installed when people install your package with <span class=\"code\">npm install<\/span>. The key of the object is the name of the package and the value is a valid semver range.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>Gulp.js<\/h2>\n<ul>\n<li><a href=\"https:\/\/scotch.io\/tutorials\/automate-your-tasks-easily-with-gulp-js\" target=\"_blank\">Gulp<\/a> is the new Grunt; faster and less config<\/li>\n<li>Install Gulp globally with <span class=\"code\">npm install -g gulp<\/span><\/li>\n<li>Install Gulp in your project directory with\u00a0<span class=\"code\">npm install &#8211;save-dev gulp<\/span> and Node will add the requirement to your package.json file under devDependencies (leave off the <span class=\"code\">-dev<\/span> to save it to dependencies)<\/li>\n<li>Install required plugins for typical front-end dev stuff\u00a0<span class=\"code\">npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename &#8211;save-dev<\/span><\/li>\n<li>Gulp only has 5 methods; <span class=\"code\">task<\/span>, <span class=\"code\">run<\/span>, <span class=\"code\">watch<\/span>, <span class=\"code\">src<\/span>, and <span class=\"code\">dest<\/span>&#8230; all you need\n<ul>\n<li><strong>gulp.task<\/strong> defines your tasks. Its arguments are name, deps and fn. \u00a0Where name is a string, deps is an array of task names, and fn is the function that performs your task. Deps is optional.<\/li>\n<li><strong>gulp.src<\/strong> points to the files we want to use. It\u2019s parameters are globs and an optional options object. It uses <strong>.pipe<\/strong> for chaining it\u2019s output into other plugins.<\/li>\n<li><strong>gulp.dest<\/strong> points to the output folder we want to write files to.<\/li>\n<li><strong>gulp.watch<\/strong> like gulp.task has two main forms. Both of which return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it\u2019s parameters.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/scotch.io\/tutorials\/run-gulp-tasks-in-laravel-easily-with-elixir\" target=\"_blank\">Gulp Tasks in Laravel Easily with Elixir<\/a>\n<ul>\n<li>Elixir is configurable:\n<ul>\n<li>production \u2013 checks if the current environment is set to production, defaults to true<\/li>\n<li>assetsDir \u2013 assets directory path, default is resources\/assets<\/li>\n<li>cssOutput \u2013 default output directory for all css files, default is public\/css<\/li>\n<li>jsOutput \u2013 default output directory for all js files, default is public\/js<\/li>\n<li>sourcemaps \u2013 if sourcemaps should be generated, default is true<\/li>\n<\/ul>\n<\/li>\n<li>Assumes your files are in&#8230; and outputs to ==&gt;&#8230;\n<ul>\n<li>resources\/assets\/less ==&gt; public\/css<\/li>\n<li>resources\/assets\/sass ==&gt; public\/css<\/li>\n<li>resources\/assets\/coffee ==&gt; public\/js<\/li>\n<\/ul>\n<\/li>\n<li>Has .version() for cache-busting<\/li>\n<li>Override input and output&#8230;\n<pre>mix.scripts(\r\n    ['module1.js', 'module2.js'],\r\n    'path\/to\/output\/file.js',\r\n    'path\/to\/source'\r\n);<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/travismaynard.com\/writing\/getting-started-with-gulp\" target=\"_blank\">Getting Started with Gulp<\/a><\/li>\n<li><a href=\"https:\/\/scotch.io\/tutorials\/automate-your-tasks-easily-with-gulp-js\" target=\"_blank\">Automate Your Tasks Easily with Gulp.js<\/a><\/li>\n<li><a href=\"http:\/\/browsenpm.org\/package.json\" target=\"_blank\">Anatomy of package.json<\/a><\/li>\n<li><a href=\"http:\/\/node-modules.com\/\" target=\"_blank\">Search All Node Modules<\/a><\/li>\n<li><a href=\"https:\/\/docs.npmjs.com\/files\/package.json\" target=\"_blank\">Specifics of npm&#8217;s package.json Handling<\/a><\/li>\n<li><a href=\"http:\/\/ilikekillnerds.com\/2014\/07\/copying-files-from-one-folder-to-another-in-gulp-js\/\" target=\"_blank\">Copying Files From One Folder To Another In Gulp.js<\/a><\/li>\n<li><a href=\"https:\/\/www.codefellows.org\/blog\/quick-intro-to-gulp-js\" target=\"_blank\">Info about Gulp&#8217;s .pipe() Method<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Node.js Install npm globally if you don&#8217;t already have it (check versions with node -v and npm -v) Run npm init\u00a0command to initialize the\u00a0package.json file to\u00a0provide information about the\u00a0project and help manage the\u00a0dependencies&#8230; example&#8230; { &#8220;name&#8221;: &#8220;my_project&#8221;, &#8220;version&#8221;: &#8220;0.0.0&#8221;, &#8220;devDependencies&#8221;: { &#8220;gulp&#8221;: &#8220;~3.8.8&#8221; }, &#8220;dependencies&#8221;: { &#8220;jquery&#8221;: &#8220;~2.1.3&#8221;, &#8220;react&#8221;: &#8220;~0.13.1&#8221; } } devDependencies: These are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[9,147,157],"class_list":["post-3954","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-javascript","tag-mo","tag-tools"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=3954"}],"version-history":[{"count":30,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3954\/revisions"}],"predecessor-version":[{"id":3988,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3954\/revisions\/3988"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=3954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=3954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=3954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}