Gulp installation and matching components to build front-end development integration

Original: http://www.dbpoo.com/getting-started-with-gulp/

All functionality prerequisites require installation of Nodejs (I install version v0.10.26) and Ruby (I install version 1.9.3p484).

Gulp is a task-based design pattern of automation tools, through the integration of plug-ins to solve a full range of front-end solutions, such as static page compression, image compression, JS merge, Sass Synchronous compilation and compression of CSS, server Control client synchronization refresh.

Gulp Installation

Global Installation Gulpjs

NPM Install-g Gulp #全局安装

Local Installation Gulpjs

NPM Install Gulp--save-dev # Local Installation

Global Installation
1. Place the installation package under/usr/local
2. Can be used directly on the command line

Local Installation
1. Place the installation package under./node_modules (the directory where NPM is running)
2. A locally installed package can be introduced via require ()

Select the Gulp component

Features required for front-end projects:
1, picture (compressed image support JPG, PNG, GIF)
2, Style (support sass simultaneously supports merging, compressing, renaming)
3. JavaScript (check, merge, compress, rename)
4. HTML (compressed)
5, client synchronization refresh display changes
6. The build item currently cleans up files in the publishing environment (keeping the publishing environment clean)

Search for gulp components with Gulp plugins
Gulp-imagemin: Compressing pictures
Gulp-ruby-sass: Support Sass
GULP-MINIFY-CSS: Compressing CSS
Gulp-jshint: Check JS
Gulp-uglify: Compression js
Gulp-concat: Merging Files
Gulp-rename: Renaming files
Gulp-htmlmin: Compressing HTML
Gulp-clean: Empty Folder
Gulp-livereload: Server Control client sync Refresh (with chrome plugin livereload and TINY-LR)

Installing the Gulp Component

Install the Component project directory, enter the directory through CD project, and perform the NPM installation component below.

NPM Install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat Gulp-clean gulp-livereload TINY-LR--save-dev project directory structure

Project (item name)
|–.git This folder is generated by managing the project through Git
|–node_modules Component Catalog
|–dist Publishing Environment
|–css style file (Style.css style.min.css)
|–images picture file (compress picture)
|–js js file (main.js main.min.js)
|–index.html static files (compressed HTML)
|–SRC production Environment
|–sass Sass File
|–images picture File
|–js js File
|–index.html Static files
|–.JSHINTRC jshint configuration file
|–gulpfile.js Gulp Task File

Gulp Basic Syntax

Gulp the Gulpfile file to complete the task, so the project must contain gulpfile.js

Gulp has five methods: SRC, dest, task, run, watch
SRC and dest: Specify the path to the source file and the file after processing
Watch: Used to listen for changes in files
Task: Specify task
Run: Perform a task

Writing Gulp Tasks/**
* Component Installation
* NPM Install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename Gulp-concat Gulp -clean gulp-livereload TINY-LR--save-dev
*/

Introduction of Gulp and components
Var Gulp= Require(' Gulp '),Base Library
Imagemin= Require(' Gulp-imagemin '),Image compression
Sass= Require(' Gulp-ruby-sass '),Sass
Minifycss= Require(' Gulp-minify-css '),CSS Compression
Jshint= Require(' Gulp-jshint '),JS Check
Uglify= Require(' Gulp-uglify '),JS Compression
Rename= Require(' Gulp-rename '),Renaming
Concat= Require(' Gulp-concat '),Merging files
Clean= Require(' Gulp-clean '),Clear Folder
Tinylr= Require(' TINY-LR '),Livereload
Server= TINYLR(),
Port=35729,
Livereload= Require(' Gulp-livereload ');Livereload

HTML processing
Gulp.Task(' HTML ',function(){
var htmlsrc='./src/*.html ',
Htmldst='./dist/';

Gulp.Src(HTMLSRC)
.Pipe(Livereload(Server))
.Pipe(Gulp.Dest(HTMLDST))
});

Style processing
Gulp.Task(' CSS ',function(){
var csssrc='./src/scss/*.scss ',
Cssdst='./dist/css ';

Gulp.Src(CSSSRC)
.Pipe(Sass({Style:' Expanded '}))
.Pipe(Gulp.Dest(CSSDST))
.Pipe(Rename({suffix:'. Min '}))
.Pipe(Minifycss())
.Pipe(Livereload(Server))
.Pipe(Gulp.Dest(CSSDST));
});

Image processing
Gulp.Task(' Images ',function(){
var imgsrc='./src/images/**/* ',
Imgdst='./dist/images ';
Gulp.Src(IMGSRC)
.Pipe(Imagemin())
.Pipe(Livereload(Server))
.Pipe(Gulp.Dest(IMGDST));
})

JS Processing
Gulp.Task(' JS ',function(){
var jssrc='./src/js/*.js ',
Jsdst='./dist/js ';

Gulp.Src(JSSRC)
.Pipe(Jshint('. Jshintrc '))
.Pipe(Jshint.Reporter(' Default '))
.Pipe(concat(' Main.js '))
.Pipe(Gulp.Dest(JSDST))
.Pipe(Rename({suffix:'. Min '}))
.Pipe(uglify())
.Pipe(Livereload(Server))
.Pipe(Gulp.Dest(JSDST));
});

Empty images, styles, JS
Gulp.Task(' Clean ',function(){
Gulp.Src(['./dist/css ','./dist/js ','./dist/images '],{Read:False})
.Pipe(Clean());
});

Default task empty picture, style, JS and rebuild run Statement gulp
Gulp.Task(' Default ',[' Clean '],function(){
Gulp.Start(' HTML ',' CSS ',' Images ',' JS ');
});

Monitor task run Statement Gulp Watch
Gulp.Task(' Watch ',function(){

Server.Listen(Port,function(Err){
If(Err){
Return console.Log(Err);
}

Listening for HTML
Gulp.Watch('./src/*.html ',function(Event){
Gulp.Run(' HTML ');
})

Monitoring CSS
Gulp.Watch('./src/scss/*.scss ',function(){
Gulp.Run(' CSS ');
});

Monitor Images
Gulp.Watch('./src/images/**/* ',function(){
Gulp.Run(' Images ')         }
        //Monitor JS
        Gulp./src/js/*.js ", function< Span class= "Br0" > () {
            Gulp.run (         }
    } ;
}) Livereload Configuration

1. Install Chrome Livereload
2. Install Http-server via NPM to quickly set up an HTTP service

NPM Install Http-server-g

3. Find the Publish Environment directory by CD Dist
4, run Http-server, the default port is 8080
5. Access Path localhost:8080
6, then open a cmd, through the CD to find the project path to execute gulp, empty the publishing environment and initialization
7, the implementation of monitoring gulp
8, click on Chrome livereload plug-in, hollow into a solid is related, you can modify the CSS, JS, HTML will appear in the page immediately.

Video material YouTube (requires FQ): http://www.youtube.com/watch?v=OKVE6wE9CW4

Project git

The configured project has been placed on GitHub.
: Https://github.com/dbpoo/gulp
git clone address:[email protected]:d bpoo/gulp.git

Gulp installation and matching components to build front-end development integration