grunt tutorial

Although the use of grunt now more and less, but the number of plug-ins is quite a lot, and the use of grunt and Gulp is quite similar;Grunt need to install node and NPMVerify that node is installed: Node-vVerify that NPM is installed: npm-vHere are the specific ways to use it:1 "Installing the Global Configuration environment NPM Install-g

1. Install the node. JS Environment FirstGrunt and Grunt plugins are installed and managed by NPM, and NPM is the package Manager for node. js. node. js Download linkVerify after installation is complete2. Installing Grunt and pluginsInstall grunt via NPM install grunt command lineNode_modules folders and Package-lock.

Through the previous front-end development artifact webstorm--Automation Workflow (preface), I believe everyone grunt automation tools have a preliminary understanding. Next I'll use the WROC3000 Web as a prototype to demonstrate how to work with the grunt toolIncrease Productivity，compress code to the maximum extent。1. First install the node environment into the official website to download the installatio

Go straight to the topic: 1. Install grunt-contrib-qunit NPM install grunt-contrib-qunit -- save-Dev (first install nodejs and NPM) to automatically download the grunt-Lib-phantomjs library and install phantomjsphantomjs to implement an unbounded WebKit browser. Although there is no interface, Dom rendering, JS running, network access, canvas/SVG rendering and o

A simple demo sample was made to document the environment configuration and the structure flow of the framework.1. Configuring the EnvironmentThe default Nodejs is installed.Install the following modules: Express (Nodejs framework), Grunt (JavaScript task Runner), Grunt-contrib-watch (grunt live load plugin), Grunt-exp

Grunt is a task-based JavaScript Project Command-line build tool that runs on the node. JS platform. Grunt can quickly create projects from templates, merge, compress and validate CSS JS files, run unit tests, and start a static server.　　Installing GruntIt is recommended that Windows users use the Git Shell for command-line operations. Git Shell is installed automatically when you install the Windows deskt

Why use build tools? Bottom line : Automating tasks that require repetitive iterations, such as compression (Minification), compilation, unit testing, linting, and so on, can ease your labor and streamline your work. When you properly configure the task, the task runner will automatically help you or your team to do most of the boring work.Grunt, what's this stuff? Recently very hot front-end automation gadget, task-based command-line build tool http://gruntjs.com why use

What is grunt?Task-based command-line tools. The things you can do include:Verifying html,css, JavaScriptCompress CSS, javascriptCompiling coffeescript, TypeScript, etcCompile lessAnd so onPacakge.jsonDescribes the metadata for an item.{ "name": "", "version": "0.1.0", "Devdependencies": { "grunt ":" ~0.4.1 " }}Reference: http://package.json.nodejitsu.com/Gruntfile.jsThe file used to conf

In a word, grunt is the Mavan of the front. It is the building tool of the JavaScript world.1. First install node. js, because grunt relies on the npm of node. js to manage and install. The final sign of the successful installation of node. JS is: Enter it under the DOS command of CMD:Node-v npm-v //When installing node. js, the system automatically joins the command NPM into the system variable, so it

Scenario One: Grunt-livereload + Chrome Plug-inAdvantages: Simple and convenient installation and configuration.Disadvantage: need to cooperate with the specified browser plugin (Firefox also has relevant plug-ins, ie, you understand).1. Need to install 2 mating parts: Grunt-contrib-watch, Connect-livereloadExecute command: NPM install--save-dev grunt-contrib-wat

Assuming that your project's CSS files are all placed in a folder named CSS in the project directory, it is now compressed into a file named Main-min.css, placed under the Css-min folder.(1) First ensure that the machine has node. js installed.(2) In the project directory, a file named Package.json is created to configure the NPM package that needs to be installed, and the contents of Package.json are as follows:{ "author": "Evan , "name": "Css_zip", " Description ":" CSS Compression ", " ve

As a front-end developer, implementing front-end automation is an effective means to greatly save development time; In this way, developers can focus more on front-end code development, instead of focusing too much on CSS compression, JS This is a tedious task. This article describes how to use grunt to generate front-end sprites and generate corresponding CSS files, Install grunt, this part is not much s

Install node. jsBrew Install node. jsInstalling gruntnpm install -g grunt-cli1. New Package.json, configuring{ "name": "domain.com", "version": "0.1.0", "Devdependencies": { "grunt": "~0.4.1", " Grunt-contrib-csslint ":" ~0.4.0 ", " Grunt-contrib-jshint ":" ~0.11.1 ", "

Recently, there is a project used requirejs to solve the front-end modularity, but with more and more pages and modules, I found that I am about to hold these lovely JS files, specifically in each page to set a bunch requirejs of configuration ( baseUrl , and so on paths ).I do not know who said, some things repeated three times, it is time to consider the automation, so I carefully pulled out of my grunt .We have to use

Found some people around the front bias.They think the front end is just a less complicated technique to tune the interface, a little polished, and finally make a "vase" with little practical value.In fact, the front-end technology stack is not simple, for example, we can use Grunt to do some automated operation.Here is a simple record of the installation of grunt, we hope to help.node. jsMany of the builds

At the weekend at home to see Angularjs, with grunt of the Livereload automatic refresh, make the most of the day, now put the configuration affixed out, lest later forget, as long as the configuration step by step to get is no problem;The start of the prepared environment installation is:(1): NodeJS, go to the official website download (href);(2): Then add the Nodejs to the Global environment variable inside (Nodejs installed can use NPM this command

The project catalog before compression:1, install JS,CSS required plug-inInstalling with NPM: NPM install grunt-contrib-uglify--save-dev--------> Install JS compression pluginNPM install grunt-contrib-cssmin--save-dev--------> Installing CSS Compression plug-insAfter manual installation, in the Package.json file, the "Grunt-contrib-uglify" is automatically added,

Under Windows, we do JS build work, are accustomed to install GRUNT-CLI, only need command line grunt ... All the construction work is done automatically. This is a perfect situation, but recently to do a server version of the automated build system, in Nodejs call batch execution grunt is very dwarfish, and various problems. Is there a better, more beautiful way