Gulp to build a simple automation

Source: Internet
Author: User
Tags using git

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

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.