![]() If you’re familiar with both JavaScript and the command line, having a look at task runners is a good idea. ![]() For managing the process of watching source files and compiling them, you have three options: the LiveReload GUI, Guard, or Grunt. This allows the browser to watch the underlying files for the page you’re viewing, and refreshes the browser window for you (without a noticeable full page refresh). Whether you’re using the LiveReload GUI or the command line tool Guard, you’ll need to install the LiveReload Chrome extension. Browser refreshing tools allow developers to automate the refresh of the browser window when changes are saved to a source file. coffee, for example), compile it to CSS or JS, respectively, and then refresh your browser to see the changes. You’d have to save your source file (.sass, or. With HTML, CSS and JS all being compiled in modern apps, it adds another layer. In the olden days, to develop a website, you’d edit an HTML file, and refresh your browser to see the changes. In addition to Bower, you can use NPM to install a plethora of assets (120,151 at the time of this writing), including tools I’ve already mentioned (Sass, CoffeeScript, Cordova) and have yet to mention (Grunt, Gulp, Browserify).īower and NPM may seem similar, but one of the biggest differences is that NPM handles nested dependencies (meaning dependencies can have dependencies), while Bower is a flat dependency tree (meaning that the user must resolve the dependencies they’re not resolved automatically). ![]() Bower is actually a Node package, so after installing NPM, you can install Bower by simply running npm install bower. NPM (Node Package Manager) is a package manager that’s part of Node.js. CodeKit comes with Bower built-in, so you can install Bower packages directly from the CodeKit UI. In this way, if one developer on your team makes an update to the version of jQuery you’ve included in your project, then checks that change into your shared repository, all other developers on the team can ensure consistency by simply updating their code base and then running bower install. It also allows you to specify which versions of assets you’d like to use in your project, and automatically updates them all every time you run bower install. After being installed, you can download any asset from the Bower repository by running the bower install command. Neat.īower and NPM are command line tools that offer similar functionality. CodeKit also includes a web server tool that allows you to host your project files locally without having to setup your own local web server, as well as tools to automate compilation of your Sass, CoffeeScript, etc. Package managers aim to solve this task by automating some or all of the tasks associated with managing the various assets and dependencies that may be included in any project you find yourself working on.ĬodeKit is a GUI for searching for project dependencies (like jQuery, or Bootstrap), downloading those to your project folder, and managing the versioning/updates of the dependencies. In fact, you may have encountered any of these, to some degree, as you start working on larger web projects and applications.Īs the number of dependencies in a project increases, it becomes increasingly important for developers to have ways to manage the download, inclusion, and versioning of an ever increasing number of dependencies. Once you’ve mastered the layer of preprocessors and JavaScript frameworks (see part one for more info), you’ll be ready to take a look at some advanced UI development tools.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |