gulp tutorial

First, material preparationNo more nonsense, just on Package.json.{ "Name": "VWP", "Version": "1.0.0", "description": "Vue test", "Main": "Index.js", "Dependencies": { "Vue": "^1.0.26", "Vue-router": "^0.7.13" }, "Devdependencies": { "Babel-core": "^6.3.17", "Babel-eslint": "^6.1.2", "Babel-loader": "^6.2.0", "Babel-plugin-transform-runtime": "^6.3.13", "babel-preset-es2015": "^6.3.13", "Babel-runtime": "^5.8.34", "Css-loader": "^0.23.0", "Eslint": "^3.5.0",

1. Compress CSSCompressing the CSS code can reduce the size of the CSS file and improve the page opening speed.target: find css/ all the CSS files in the directory, compress them, and store the compressed files in the dist/css/ directory.Before compressing, you need to install a new module and enter the following command line:NPM Install Gulp-minify-cssCreate the file in the corresponding directory gulpfile.js and write the following://Get GulpvarGulp

Gulp is very useful, after writing a good gulpfile.js file, the general situation in the command line gulp can start the development environment, greatly simplifying the development process. However, there is a problem is not resolved, is to write the Gulpfile.js file process, if this time gulp has been started, modify the Gulpfile.js file, the process does not c

Details about how Gulp implements static Web page modularization. Preface Some embarrassing problems are inevitable in the Process of pure static page development. For example, the entire Code contains 50 pages, 40 of which are the same as the modules at the top and bottom of the page. We copied the same two pieces of code 40 times (the most uncomfortable method ). Then, the problem is solved in this way. Then, the product manager looked at it several

Gulp Introduction: Gulp is a tool for building code in the front-end development process, is an automatic project construction tool, she not only can optimize the website resources, and in the development process many repetitive tasks can use the correct tool to automatically complete, using her, we can not only very happy to write code, but also greatly improve our efficiency.

has been using grunt, the total sense of Grunt parameter configuration method is very cumbersome, not a clearer flow, coupled with their own gulp flow operations more interested in the decision to go to gulp. Believe that the front-end ER in the release of their own code, if not using some of the front-end building tools, for frequent online projects, their own manual compression and packaging to replace

Gulp is an automated tool that front-end developers can use to handle common tasks: 1. Build a Web server 2. Automatically reload browser when file is saved 3, using the preprocessor such as sass, less 4, optimize resources, such as compression CSS, JavaScript, compressed pictures Of course, gulp can do much more than that. If you're crazy enough, you can even use it to build a static page builder.

First, the preparatory work1. What is NPM?NPM is Nodejs's package management tool that manages, updates, searches, and publishes node's packages. The GULP is installed through NPM. About NPM Chinese introduction, here is a very good article: http://www.cnblogs.com/chyingp/p/npm.htmlFor a complete NPM document, see here: https://docs.npmjs.com2. Install node. js and upgrade NPM to the latest versionNodejs Install: Open nodejs.org Download Nodejs instal

I. INTRODUCTION Gulp is a NODEJS-based automatic task runner that automates the testing, checking, merging, compressing, formatting, automatic browser refresh, and deployment file generation of JAVASCRIPT/COFFEE/SASS/LESS/HTML/IMAGE/CSS and other files. And listen for files that repeat the specified steps after the change. In the implementation, gulp borrowed from the UNIX operating system pipeline (pipe) t

Read Catalogue First, Amendment 1: Ii. Amendment 2: Third, Revision 3: Read Catalogue Gulp resolving front-end cache issues for REQUIREJS projects (ii) Objective 2, modify the Require.js 3. Modify Gulp-rev and Gulp-rev-collector 4. Testing 5. Summary Back to the table of contents prefaceIn this secti

Gulp is a very useful Web front-end automation development tool that can help us do a lot of work by configuring the Gulp task. Not only that, we can also use Gulp to build a simple server for us to test. Let's look at how to configure: 1. First, create Package.json files (package dependencies) NPM Init It will then appear as follows (if you don't fill in anyth

1. Installing GulpCNPM Install-g Gulp;2. Then also need to install Gulp in the current directory, specifically, only know that after the installation will be in the current directory under the Node_modules more than one Gulp folderCNPM Install Gulp--save-devThere's a great God who knows, and he's looking for guidance.3

Be sure to read this section after you understand the following chapters: Installing Node and Gulp Use Gulp to compress JS Compressing the CSS code can reduce the size of the CSS file and improve the page opening speed.We then convert the rule to Gulp code.LawLocate css/ all the CSS files in the directory, compress them, and store the compressed

EnvironmentInstalling Gulp and Grunt is all about node's package management tool-NPM, so you'll need to install node on your computer so you can install Gulp and Grunt. (Install node automatically installs NPM, detects installation success Node-v, NPM-V)InstallationTo use Gulp in your project, you need to install the GULP