Using the Gulp Build tool

Before a demo use is grunt, according to grunt used plug-ins to find the next gulp, the overall use is smooth, to tell the truth does not feel that the cost of learning to reduce anything, almost. But there are some problems:

1, gulp.dest () output directory needs to use "./" And not "/"

2, Gulp Jshint Some rules are not detected, and grunt but detected, you can use "ASI": true test. (it is said that now we all use eslint instead of JSLint, looked under the eslint180 rules, frighten cry good. ）

3, Gulp task Some completion will not have a message prompt, and grunt plug-in is much friendlier.

Gulp.task (' uglify ', [' jshint '], function() {//...}

Package.json

{  "Name": "vip.uc108",  "Version": "0.1.0",  "Devdependencies": {    "Del": "^1.2.0",    "Gulp": "^3.9.0",    "Gulp-concat": "^2.6.0",    "Gulp-csscomb": "^3.0.6",    "Gulp-eslint": "^1.0.0",    "Gulp-file-include": "^0.13.7",    "Gulp-imagemin": "^2.3.0",    "Gulp-jshint": "^1.11.2",    "Gulp-livereload": "^3.8.0",    "Gulp-minify-css": "^1.2.0",    "Gulp-notify": "^2.2.0",    "Gulp-rename": "^1.2.2",    "Gulp-ruby-sass": "^1.0.5",    "Gulp-uglify": "^1.2.0"  }}

Gulpfile.js

varGulp = require (' Gulp '));varSass = require (' Gulp-ruby-sass '));varCsscomb = require (' Gulp-csscomb '));varFileinclude = require (' Gulp-file-include '));varImagemin = require (' gulp-imagemin '));varJshint = require (' Gulp-jshint '));varLivereload = require (' Gulp-livereload '));varCssmin = require (' gulp-minify-css '));varNotify = require (' gulp-notify '));varUglify = require (' gulp-uglify '));varRename = require (' Gulp-rename ')); Gulp.task (' Sass ',function() {    returnSass ('./static/introduce/scss '), {style:"Compressed"}). On (' Error ',function(Err) {Console.error (' error! ', Err.message); }). Pipe (Gulp.dest ('./static/introduce/css ') . Pipe (Livereload ({start:true        }));}); Gulp.task (' CSS ',function() {    returnGULP.SRC (['./static/activity/**/*.css ', '!. /static/activity/**/*min.css ']). Pipe (Csscomb ()).    Pipe (Cssmin ()). Pipe (Rename (function(path) {Path.basename+ = ". Min"; }). Pipe (Gulp.dest ('./static/activity ') . Pipe (Livereload ({start:true        }));}); Gulp.task (' Image ',function() {GULP.SRC (' static/activity/index/img/* '). Pipe (Imagemin ()). Pipe (Gulp.dest ('./static/activity/index/img '));}); Gulp.task (' Jshint ',function() {    returnGULP.SRC (['./static/activity/**/*.js ', '!. /static/activity/**/*.min.js ']). Pipe (Jshint ('. Jshintrc '). Pipe (Jshint.reporter (' Default '));}); Gulp.task (' Uglify ', [' Jshint '],function() {    returnGULP.SRC (['./static/activity/**/*.js ', '!. /static/activity/**/*.min.js ']). Pipe (Uglify ({ext:". Min.js"}). Pipe (Rename (function(path) {Path.basename+ = ". Min"; }). Pipe (Gulp.dest ('./static/activity/'));}) Gulp.task (' Fileinclude ',function() {    returnGULP.SRC (' src/html/**/*.html '). Pipe (fileinclude ({prefix:‘@@‘, BasePath:' @file '}). Pipe (Gulp.dest ('./view '));}); Gulp.task (' Watch ',function() {Gulp.watch (['./static/activity/**/*.js ', '!. /static/activity/**/*.min.js '], [' Uglify ']);}); Gulp.task (' Default ', [' image ', ' fileinclude '],function() {GULP.SRC (' Package.json '). Pipe (Notify ("Default finished")));});

About Gulp plug-ins, have time to try these ~ ~

Gulp-revgulp-concatgulp-sourcemapsgulp-connect

Using the Gulp Build tool