Gulp to build a simple automation

Front-end Project required features: 1, picture (compressed image support JPG, PNG, GIF) 2, style (support sass simultaneously support merge, compress, rename) 3, JavaScript (check, merge, compress, rename) 4, HTML (compression) 5, client synchronization Refresh display modification 6, The build item currently cleans up files in the publishing environment (keeping the publishing environment clean)

Gulp Plugins, looking for the Gulp component gulp-imagemin: Compress picture gulp-ruby-sass: Support sass gulp-minify-css: Compress css gulp-jshint: Check JS Gulp-uglify: Compress js gulp-concat: Merge file gulp-rename: Rename file gulp-htmlmin: Compress HTML gulp-clean: Empty folder gulp-livereload: server Control Client Synchronization Refresh (required with chrome plugin livereload and TINY-LR)

First, installation

Node First loaded:

NPM Install-g Gulp Global Installation

NPM Install Gulp--save-dev

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

The most commonly used file structure:

Project (item name)| –.git This folder is generated by using GIT to manage projects | –node_modules Components Directory | –dist Publishing Environment     | –css Style file (style.css style.min.css)    | –images picture file (zipped image)    | –js js file (main.js main.min.js)    | –index.html static file (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

//introduction of Gulp and ComponentsvarGulp = require ('Gulp'),//Base LibraryImagemin = require ('Gulp-imagemin'),//image CompressionSass = require ('Gulp-ruby-sass'),//SassMinifycss = require ('Gulp-minify-css'),//CSS CompressionJshint = require ('Gulp-jshint'),//JS CheckUglify = require ('gulp-uglify'),//JS CompressionRename = require ('Gulp-rename'),// RenamingConcat = require ('Gulp-concat'),//Merging FilesClean = require ('Gulp-clean'),//Clear FolderTINYLR = require ('TINY-LR'),//LivereloadServer =TINYLR (), Port=35729, Livereload= Require ('Gulp-livereload');//Livereload//HTML processingGulp.task ('HTML', function () {varHTMLSRC ='./src/*.html', Htmldst='./dist/'; GULP.SRC (HTMLSRC). PIPE (Livereload (server)). Pipe (Gulp.dest (HTMLDST))});//Style processingGulp.task ('CSS', function () {varCSSSRC ='./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 ProcessingGulp.task ('Images', function () {varIMGSRC ='./src/images/**/*', Imgdst='./dist/images'; GULP.SRC (IMGSRC). Pipe (Imagemin ()). Pipe (Livereload (server)). Pipe (Gulp.dest (IMGDST));})//JS ProcessingGulp.task ('JS', function () {varJSSRC ='./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, JSGulp.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 GulpGulp.task ('default', [' Clean'], function () {Gulp.start ('HTML','CSS','Images','JS');});//Monitor task run Statement Gulp WatchGulp.task ('Watch', function () {Server.listen (port, function (err) {if(err) {returnConsole.log (ERR); }        //Listening for HTMLGulp.watch ('./src/*.html', Function (Event) {Gulp.run ('HTML'); })        //Monitoring CSSGulp.watch ('./src/scss/*.scss', function () {Gulp.run ('CSS');        }); //Monitor ImagesGulp.watch ('./src/images/**/*', function () {Gulp.run ('Images');        }); //Monitor JSGulp.watch ('./src/js/*.js', function () {Gulp.run ('JS');    }); });});

Livereload Configuration

1. Install Chrome livereload 2, install Http-server via NPM, and quickly set up an HTTP service

NPM Install Http-server-g

3, through the CD to find the publishing environment Directory Dist 4, run Http-server, the default port is 8080 5, Access path localhost:8080 6, and then open a CMD, through the CD to find the project path to execute gulp, empty the publishing environment and initialize 7, perform 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.

Gulp to build a simple automation