Gulp Tutorial Compression Merge Css,js

Source: Internet
Author: User

Package.json
If you are familiar with NPM, you can use Package.json to save all NPM install--save-dev gulp-xxx module dependencies and module versions.
At the command line, enter

NPM Init

will be required to complete the project information in turn, not clear can directly enter skip

Installation dependencies
Install Gulp to project (Prevent Global Gulp upgrade from incompatible with this project Gulpfile.js code)

Nup Install Gulp--save-dev

Description:--save-dev Save configuration information to Package.json devdependencies node.
Now open Package.json will find the following code

"Devdependencies": {    "gulp": "^3.8.11"}

Declares that the development of this project relies on gulp
Then install other dependencies: The project needs to be installed, here we can install uniformly, separated by a space
NPM gulp-minify-css gulp-concat gulp-uglify gulp-rename gulp-util--save-dev
At this point Packjson will continue to update, and we will install dependencies on the unified write Packjson.
Configuring the JS task
Create a new Gulpfile.js file at this time
1. First introduce dependency

var gulp = require (' Gulp '),    minifycss = require (' Gulp-minify-css '),    concat = require (' Gulp-concat '),    Uglify = require (' gulp-uglify '),    rename = require (' Gulp-rename '),    gutil = require (' Gulp-util ');

2. Add an execution task
Compress CSS

Gulp.task (' Minify_css ', function () {    var csssrc = ['./src/css/*.css '];    Return GULP.SRC (CSSSRC)//Compressed Files        . Pipe (concat (' all.css '))//merge all CSS to All.css        . Pipe (Gulp.dest ('./dist/css ')) Output folder        . Pipe (rename ({suffix: '. Min ')). Pipe (        minifycss ())        . Pipe (Gulp.dest ('./dist/css '));//Perform compression});        

Compression JS

Gulp.task (' Minify_js ', function () {    var jssrc = ['./src/js/*.js ', '!. /src/js/*.src.js '];    Return Gulp.src (JSSRC)        . Pipe (concat (' all.js ')//merge all JS to All.js        . Pipe (Gulp.dest ('./dist/js '))// Output all.js to Folder        . Pipe (rename ({suffix: '. Min '))//rename the compressed file name        . Pipe (Uglify ())//Compression        . Pipe (Gulp.dest ( './dist/js ')); Output});

3. Default Tasks
Default task

Gulp.task (' Default ', function () {    gulp.run (' minify_css ', ' Minify_js ');});

Perform tasks
At the command line, enter:

Gulp
The final form of the directory structure is as follows

SRC is our original file, and dist is the file we generated after we've compressed it.

Gulp Tutorial Compression Merge Css,js

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.