gulp安装和使用简介

一. gulp和grunt对比

　　grunt目前的工作流程：读文件、修改文件、写文件——读文件、修改文件、写文件——...

　　gulp目前的工作流程：读取文件——修改文件——修改文件...——写文件

二. grunt存在问题

　　1、插件职能不够单一

　　2、插件完成了本不该由插件完成的事情（这个我有点迷糊，为什么说是 things don't need to be plugins？）

　　3、配置过于复杂

　　4、由于糟糕的流程控制导致的临时文件/目录

三. gulp安装

　　1、首先全局安装gulp命令行工具（相当于grunt-cli）

npm install -g gulp

　　2、然后，在项目下安装gulp（相当于grunt）、gulp-uglify

npm install --save-dev gulp gulp-uglify

　　3、在项目根目录下创建 gulpfile.js

var gulp = require('gulp'), uglify = require('gulp-uglify');gulp.task('default', function(){ gulp.src('src/app.js')  .pipe(uglify())  .pipe(gulp.dest('dist/'));});

　　4、运行gulp

gulp

四. 项目代码

var gulp = require('gulp'), jshint = require('gulp-jshint'), minifycss = require('gulp-minify-css'), minifyhtml = require('gulp-minify-html'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), del = require('del'), replace = require('gulp-replace'), gulpif = require('gulp-if'), htmlreplace = require('gulp-html-replace'), doCompression = false, doReplaceENV = false, css_version = '111', js_version = '111', simu_version = '111';//转移图片gulp.task('mvimages',function(){ return gulp.src('simusrc/images/*') .pipe(gulp.dest('simu/images'));});//压缩cssgulp.task('minifycss',function(){ return gulp.src('simusrc/**/*.css') .pipe(gulpif(doCompression, minifycss())) .pipe(gulp.dest('simu'));});//合并jsgulp.task('concatjs',function(){ return gulp.src(['simusrc/js/dahuo_core.js', 'simusrc/js/webtools.js', 'simusrc/js/config.js',  'simusrc/js/offsetslider.js', 'simusrc/js/touchslider.js', 'simusrc/js/search.js']) .pipe(jshint()) .pipe(gulpif(doReplaceENV, replace("var MainENV = MainConfig['localtest']", "var MainENV = MainConfig['prod']"))) .pipe(replace('SIMU_PATH_VERSION', simu_version)) .pipe(concat('app_build.js')) .pipe(gulpif(doCompression, rename({suffix:'.min'}))) .pipe(gulpif(doCompression, uglify())) .pipe(gulp.dest('simu/js/'));});//压缩jsgulp.task('minifyjs',function(){ return gulp.src(['simusrc/**/*.js', '!simusrc/**/*.min.js']) .pipe(jshint()) .pipe(gulpif(doCompression, replace('webchat.js?JS_VERSION', 'webchat.min.js?version=' + js_version))) .pipe(gulpif(!doCompression, replace('webchat.js?JS_VERSION', 'webchat.js?version=' + js_version))) .pipe(gulpif(doReplaceENV, replace("var MainENV = MainConfig['localtest']", "var MainENV = MainConfig['prod']"))) .pipe(replace('SIMU_PATH_VERSION', simu_version)) .pipe(gulpif(doCompression, rename({suffix:'.min'}))) .pipe(gulpif(doCompression, uglify())) .pipe(gulp.dest('simu'));});//转移min.jsgulp.task('getminjs',function(){ return gulp.src(['simusrc/**/*.min.js']) .pipe(jshint()) .pipe(gulp.dest('simu'));});//html JS替换 JS,CSS版本号gulp.task('minifyhtml',function(){ return gulp.src('simusrc/**/*.html') .pipe(replace(/<script.+dahuo_core\.js.+/g, '')) .pipe(replace(/<script.+webtools\.js.+/g, '')) .pipe(replace(/<script.+offsetslider\.js.+/g, '')) .pipe(replace(/<script.+touchslider\.js.+/g, '')) .pipe(replace(/<script.+search\.js.+/g, '')) .pipe(replace(/<script.+src='/images/loading.gif' data-original="(.+)config\.js.+/g, '<script type="text/javascript" src='/images/loading.gif' data-original="$1app_build.js?JS_VERSION"></script>')) .pipe(gulpif(doCompression, replace(/(\.min)?\.js\?JS_VERSION/g, '.min.js?version=' + js_version))) .pipe(gulpif(!doCompression, replace('js?JS_VERSION', 'js?version=' + js_version))) .pipe(replace('css?CSS_VERSION', 'css?version=' + css_version)) .pipe(gulp.dest('simu'));});gulp.task('getmanifest',function(){ return gulp.src(['simusrc/**/*.manifest', 'simusrc/**/manifest.*']) .pipe(replace(/.+dahuo_core\.js.+/g, '')) .pipe(replace(/.+webtools\.js.+/g, '')) .pipe(replace(/.+offsetslider\.js.+/g, '')) .pipe(replace(/.+touchslider\.js.+/g, '')) .pipe(replace(/.+search\.js.+/g, '')) .pipe(replace(/(.+)config\.js.+/g, '$1app_build.js?JS_VERSION')) .pipe(gulpif(doCompression, replace(/(\.min)?\.js\?JS_VERSION/g, '.min.js?version=' + js_version))) .pipe(gulpif(!doCompression, replace('js?JS_VERSION', 'js?version=' + js_version))) .pipe(replace('css?CSS_VERSION', 'css?version=' + css_version)) .pipe(replace('html?SIMU_PATH_VERSION', 'html?version=' + simu_version)) .pipe(gulp.dest('simu'));});//清除目录gulp.task('clean',function(cb){ del(['simu/**/*.css', 'simu/**/*.js', 'simu/images', 'simu/**/*.html', 'simu/**/*.manifest', 'simu/**/manifest.*'], cb);});//开始任务gulp.task('default', ['clean'], function(){ gulp.start('mvimages', 'minifycss', 'concatjs', 'minifyjs', 'getminjs', 'minifyhtml', 'getmanifest');});gulp.task('ppe', ['clean'], function(){ doCompression = true; doReplaceENV = true; gulp.start('mvimages', 'minifycss', 'concatjs', 'minifyjs', 'getminjs', 'minifyhtml', 'getmanifest');});gulp.task('release', ['clean'], function(){ doCompression = true; doReplaceENV = true; gulp.start('mvimages', 'minifycss', 'concatjs', 'minifyjs', 'getminjs', 'minifyhtml', 'getmanifest');});

原标题：gulp安装和使用简介

关键词：