{"id":11534,"date":"2016-03-23T12:11:42","date_gmt":"2016-03-23T10:11:42","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=11534"},"modified":"2016-03-16T11:28:44","modified_gmt":"2016-03-16T09:28:44","slug":"automate-front-end-development-environment-npm","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/","title":{"rendered":"Automate your front-end development environment with npm"},"content":{"rendered":"

For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular ones, Grunt<\/a>, and Gulp<\/a>. Then you have your food-related tools, like Brunch<\/a>, Mimosa<\/a> and Broccoli<\/a>. You\u2019ve got fancy new hot stuff like fly<\/a>. Then there\u2019s classic make-like tools like Cake<\/a>, Jake<\/a> and ShellJS\u2019s make<\/a>. Some folks just use Make<\/a>.<\/p>\n

That\u2019s a lot of options. Maybe it just makes sense to just roll up your sleeves and let out a snort, or take a sip. Yep, just pick one of the big two and move on, it would be a safe choice.<\/p>\n

But maybe you were never really sold on the big two. The plugin dependencies that are just wrappers for other modules, hundreds of lines of configuration to setup your tasks, spread across a dozen files\u2026 it all seems like an unnecessary abstraction. There\u2019s got to be a better way.<\/p>\n

Sometimes it\u2019s easiest to just drop a few lines in a shell script and get cranking. npm<\/a> let\u2019s you do that.<\/p>\n

npm run-script<\/h2>\n

In your package.json, you define a scripts object. In the scripts object, your keys are the names of your commands and the values are single-line scripts. To execute, you type \u2018npm run <command>\u2019. There are also some lifecycle scripts that dont require \u2018run\u2019 (like \u2018npm start\u2019 and \u2018npm test\u2019). Take a look at the official docs, here<\/a> and here<\/a>.<\/p>\n

That\u2019s basically all there is to it. My goal here is to go over specifics of how to set up a JavaScript development environment without installing any of the task runners, or even writing JavaScript code. We\u2019ll want to be able to bundle up our JavaScript files, minify them, rebundle on changes all while serving a directory of the built static files. We\u2019ll also want to be able to run a test suite, build documentation, and clean our build artifacts.<\/p>\n

There are a lot of choices out there for every type of task we cover. I\u2019m just going to pick some tools I\u2019m more familiar with. A great thing about using npm scripts is there are a ton of node modules that have command-line interfaces you can leverage.<\/p>\n

Building \/ Bundling<\/h3>\n

What we want to do is bundle up our code, stylings, and html into build directory that we can delete anytime.<\/p>\n

For the\u00a0JavaScript, feel free to use your favorite lisp-like or haskell-inspired transpiled language; for this we\u2019ll just stick to plain-jane ES5 and Browserify<\/a> for now.<\/p>\n

We want something like this:<\/p>\n

{\r\n  \"scripts\": {\r\n    \"build:js\": \"browserify src\/entry.js -o public\/bundle.js\"\r\n  }\r\n}<\/pre>\n
But that won\u2019t work. Browserify will fail if the directory to the output file does not exist. It also seems tacky to have a separate task just to make sure the directory exists before we bundle up. Someone submitted a pull request<\/a> well over a year ago to fix this, but it has yet to be merged.<\/p>\n
Sometimes it\u2019s hard to find the functionality you want in someone else\u2019s node module. You can always write your own. I wrote one called Shove<\/a> so I can send stdout to files in directories that don\u2019t exist yet. It\u2019s so simple that it\u2019s almost silly, but hey, now we can write something like this:<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\"\r\n  }\r\n}<\/pre>\n
What about all the transforms? Some people can\u2019t handle a huge single line command in their config, but I don\u2019t think it\u2019s really that bad. Otherwise, look into using the browserify.transform<\/a> object in your package.json file.<\/p>\n
We can use cpx<\/a> to copy our \u2018index.html\u2019 file over, and node-sass<\/a> for generating css.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\"\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\"\r\n  }\r\n}<\/pre>\n
Cleanup<\/h3>\n
Just use rimraf<\/a>, and recursively delete your build directory.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\"\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\"\r\n  }\r\n}<\/pre>\n
Code Quality \/ Testing<\/h3>\n
You should be using a style linter. When I work on a project, I don\u2019t want to have to spend time manually determining if something I\u2019m writing follows the style guidelines. I should be able to quickly set up my editor so that my tab key does what it should do. And when I don\u2019t follow the style, I should get squigglies, highlights, tooltips, and all that other great stuff.<\/p>\n
I\u2019m less interested in what someone thinks is the way you \u2018should\u2019 right JavaScript, and more interested using a consistent style in an application. My suggestion is to use something simple, like Standard<\/a>, XO<\/a> or JSLint<\/a>. Or you can get things exactly how you want with ESLint<\/a>. It should run when you type \u2018npm test\u2019. This matters because tools like TravisCI<\/a> will automatically run \u2018npm test\u2019 on Node projects, let you know when PRs fail the tests, and other niceties.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\",\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\",\r\n    \"test\": \"standard\"\r\n  }\r\n}<\/pre>\n
We also want to use \u2018npm test\u2019 for\u2026 tests. We can just grab something like jasmine-node<\/a>, add a \u2018spec\u2019 folder with some \u2018*-spec.js\u2019 files. So let\u2019s make sure we run both the linter and the tests.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\",\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\",\r\n    \"test\": \"standard && jasmine-node spec\"\r\n  }\r\n}<\/pre>\n
The double ampersand (&&) lets us runs commands in series, and is cross-platform. Other cross-platform commands include pipe \u2018|\u2019, stdout \u2018>\u2019, stdin \u2018<\u2018, and appending to a file \u2018>>\u2019. There\u2019s a guide for comparing *nix commands to Windows commands here<\/a>.<\/p>\n
One more thing on the testing side. It\u2019s nice to use pre-commit hooks that make sure our tests pass before commiting code. There\u2019s a simple solution. pre-commit<\/a> by default will run \u2018npm test\u2019 on commits, and exit with an error if a test fails. Just install it and you\u2019re done.<\/p>\n
Documentation<\/h3>\n
Use JSDoc<\/a>\u00a0and set up whatever you need in a \u2018conf.json\u2019 file.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\",\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\",\r\n    \"docs\": \"jsdoc -c conf.json\"\r\n    \"test\": \"standard && jasmine-node spec\"\r\n  }\r\n}<\/pre>\n
Dev Server<\/h3>\n
Now we need a way to serve our static files. One option is http-server<\/a>, and it\u2019s super simple. If there is a \u2018public\u2019 directory, http-server defaults to serving from there. So all we need is this:<\/p>\n
{\r\n  \"scripts\": {\r\n    \"serve\": \"http-server\"\r\n  }\r\n}<\/pre>\n
Need mock data? There is an excellent module called json-server<\/a> that will set up REST routes based on a json file. It will also serve your static files, again from \u2018public\u2019 by default if that folder exists. We can take snapshots while we\u2019re working too, so let\u2019s set that up.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\",\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\",\r\n    \"docs\": \"jsdoc -c conf.json\"\r\n    \"serve\": \"json-server mock\/db.json --snapshots mock\"\r\n    \"test\": \"standard && jasmine-node spec\"\r\n  }\r\n}<\/pre>\n
Watching<\/h3>\n
When certain files change, we want certain scripts to run, waiting for the next change. A lot of the modules we are using already have this kind of functionality built in. There\u2019s a way to do this cleanly with npm-watch<\/a>. We add a new object to the package.json file called \u2018watch\u2019. Each property is the name of a npm-script to run, and the value is a path, glob, or array of path\/globs to watch. Only the script that is associated with the changed files will run.<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\",\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\",\r\n    \"docs\": \"jsdoc -c conf.json\"\r\n    \"serve\": \"json-server mock\/db.json --snapshots mock\"\r\n    \"test\": \"standard && jasmine-node spec\"\r\n    \"watch\": \"npm-watch\"\r\n  },\r\n  \"watch\": {\r\n    \"build:css\": \"src\/*.sass\"\r\n    \"build:html\": \"src\/index.html\",\r\n    \"build:js\": \"src\/*.js\"\r\n  }\r\n}<\/pre>\n
All Together Now<\/h3>\n
We have a lot of great tasks to help automate the workflow, but now we want a single command that set up everything we need to get to work. I\u2019ve investigated most of the parallel task-running node modules out there, and npm-run-all<\/a> is probably my favorite. We want to run the \u2018watch\u2019 command and the \u2018serve\u2019 command together. We\u2019ll use the \u2018start\u2019 lifecycle script so you can just run \u2018npm start\u2019 and you\u2019re ready.<\/p>\n
Here\u2019s what it looks like all together. It\u2019s easy to read and see all at once, and is an order of magnitude less lines than a Grunt or Gulp setup:<\/p>\n
{\r\n  \"scripts\": {\r\n    \"build:css\": \"node-sass --output-style compressed src\/main.sass public\/main.css\",\r\n    \"build:html\": \"cpx src\/index.html public\",\r\n    \"build:js\": \"browserify src\/entry.js | shove public\/bundle.js\",\r\n    \"clean\": \"rimraf public\",\r\n    \"docs\": \"jsdoc -c conf.json\",\r\n    \"serve\": \"json-server mock\/db.json --snapshots mock\",\r\n    \"start\": \"npm-run-all --silent --parallel serve watch\",\r\n    \"test\": \"standard && jasmine-node spec\",\r\n    \"watch\": \"npm-watch\"\r\n  },\r\n  \"watch\": {\r\n    \"build:css\": \"src\/*.sass\"\r\n    \"build:html\": \"src\/index.html\",\r\n    \"build:js\": \"src\/*.js\"\r\n  }\r\n}<\/pre>\n
Thanks for reading! I put a lot of links in this post, most of these modules have good documentation, check \u2019em out.<\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nAutomate your front-end development environment with npm<\/a> from our WCG partner<\/a> Keyhole Software at the Keyhole Software<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular ones, Grunt, and Gulp. Then you have your food-related tools, like Brunch, Mimosa and Broccoli. You\u2019ve got fancy new hot stuff like fly. Then there\u2019s classic make-like tools like Cake, Jake and …<\/p>\n","protected":false},"author":145,"featured_media":924,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-11534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js"],"yoast_head":"\nAutomate your front-end development environment with npm - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automate your front-end development environment with npm - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-23T10:11:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joseph Post\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joseph Post\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\"},\"author\":{\"name\":\"Joseph Post\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/eb389e218cb281ffeb5d2a2a6a664753\"},\"headline\":\"Automate your front-end development environment with npm\",\"datePublished\":\"2016-03-23T10:11:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\"},\"wordCount\":1263,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"articleSection\":[\"Node.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\",\"name\":\"Automate your front-end development environment with npm - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"datePublished\":\"2016-03-23T10:11:42+00:00\",\"description\":\"For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Node.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/node-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Automate your front-end development environment with npm\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/eb389e218cb281ffeb5d2a2a6a664753\",\"name\":\"Joseph Post\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/80727435bdad7bbe41d33ed77ca192a6253debd735463729ed044d5cb3a1967f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/80727435bdad7bbe41d33ed77ca192a6253debd735463729ed044d5cb3a1967f?s=96&d=mm&r=g\",\"caption\":\"Joseph Post\"},\"description\":\"Joe Post is a software developer and composer based in Kansas City. His favorite operating system is Arch Linux. He prefers using community-driven, open-source technologies. Currently working on a Microservices IOT platform.\",\"sameAs\":[\"https:\/\/keyholesoftware.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/joseph-post\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Automate your front-end development environment with npm - Web Code Geeks - 2026","description":"For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/","og_locale":"en_US","og_type":"article","og_title":"Automate your front-end development environment with npm - Web Code Geeks - 2026","og_description":"For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-03-23T10:11:42+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","type":"image\/jpeg"}],"author":"Joseph Post","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Joseph Post","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/"},"author":{"name":"Joseph Post","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/eb389e218cb281ffeb5d2a2a6a664753"},"headline":"Automate your front-end development environment with npm","datePublished":"2016-03-23T10:11:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/"},"wordCount":1263,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","articleSection":["Node.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/","name":"Automate your front-end development environment with npm - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","datePublished":"2016-03-23T10:11:42+00:00","description":"For JavaScript development, there are more build tools than you know what to do with.\u00a0The non-verbal utterance category contains the two most popular","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/automate-front-end-development-environment-npm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Node.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/node-js\/"},{"@type":"ListItem","position":4,"name":"Automate your front-end development environment with npm"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/eb389e218cb281ffeb5d2a2a6a664753","name":"Joseph Post","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/80727435bdad7bbe41d33ed77ca192a6253debd735463729ed044d5cb3a1967f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/80727435bdad7bbe41d33ed77ca192a6253debd735463729ed044d5cb3a1967f?s=96&d=mm&r=g","caption":"Joseph Post"},"description":"Joe Post is a software developer and composer based in Kansas City. His favorite operating system is Arch Linux. He prefers using community-driven, open-source technologies. Currently working on a Microservices IOT platform.","sameAs":["https:\/\/keyholesoftware.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/joseph-post\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/11534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=11534"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/11534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/924"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=11534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=11534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=11534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}