gulp 搭建项目

gulp可以压缩代码，把图片转化为base64格式,提高网页性能，易于项目管理。下面介绍一下怎么使用其实gulp相对于webpack更易于学习，但个人感觉gulp没有webpack功能多，webpack把每一个文件都看成一个块，webpack更适用于react,一般情况下gulp足以满足我们的需求废话不说了直接上代码gulpfiles.js/** @Author: wdl* @Date: 2017-06-05 09:56:06* @Last Modified by: wdl* @Last Modified time: 2017-06-07 17:29:56*/'use strict';var gulp = require('gulp'), // 引入gulpconcat = require("gulp-concat"),config = require('./gulp/config.json'),browserSync = require('browser-sync').create(),gulpLoadPlugins = require('gulp-load-plugins')(),gulpTaskList = require('fs').readdirSync('./gulp/tasks/');gulpTaskList.forEach(function(taskfile){require('./gulp/tasks/' + taskfile)(gulp, gulpLoadPlugins, config, browserSync);});gulp.task('serve', ['styleTask','scriptTask', 'imageTask','pageTask', 'bower', ], function(){browserSync.init({// files: "build/**/*.*",// proxy: "localhost:3000/build/pages/index.html"port:8082,server: {baseDir: './build',index: './login.html'}});});gulp.task('watch', ['serve'], function(){// 检测文件发送变化gulp.watch(config.pageFile.src, ["pageTask"]);gulp.watch(config.styleFile.src, ["styleTask"]);gulp.watch(config.scriptFile.src, ["scriptTask"]);gulp.watch(config.imageFile.src, ["imageTask"]);gulp.watch(config.bowerFile.src, ["bower"]);});// default 默认任务，依赖清空任务gulp.task('default', ['watch']);名字必须为gulpfile.js这是gulp的默认设置。styleTask.js

'use strict';
module.exports = function(gulp, plugin, config, browserSync)
{
var minifyCSS = require('gulp-minify-css');
var base64 = require('gulp-base64');
gulp.task('styleTask', function()
{
return gulp.src(config.styleFile.src)
.pipe(plugin.cache(plugin.cleanCss()))
.pipe(minifyCSS())
.pipe(base64())
.pipe(gulp.dest(config.styleFile.dest))
// .pipe(plugin.notify({
//     message: 'Styles task complete'
// }))
.pipe(browserSync.reload({
stream: true
}));
});

};

压缩代码并把css里面的图片改为base64格式pageTask.js'use strict';module.exports = function(gulp, plugin, config, browserSync){gulp.task('pageTask', function(){gulp.src(config.pageFile.src).pipe(plugin.htmlmin({collapseWhitespace: true,// 压缩HTMLminifyJS: true,// 压缩页面JSminifyCSS: true// 压缩页面CSS})).pipe(gulp.dest(config.pageFile.dest))// .pipe(plugin.notify({// message: 'Pages task complete'// })).pipe(browserSync.reload({stream: true}));});};页面压缩imageTask.js  图片/** @Author: wdl* @Date: 2017-06-05 09:56:06* @Last Modified by: wdl* @Last Modified time: 2017-06-07 17:51:30*/'use strict';module.exports = function(gulp, plugin, config,browserSync){gulp.task('scriptTask', function(){return gulp.src(config.scriptFile.src).pipe(plugin.cache(plugin.jshint())).pipe(plugin.jshint.reporter('default'))// 对代码进行报错提示.pipe(plugin.uglify()).pipe(gulp.dest(config.scriptFile.dest)).pipe(browserSync.reload({stream: true}));});};

scriptFile.js

/** @Author: wdl* @Date:   2017-06-05 09:56:06* @Last Modified by:   wdl* @Last Modified time: 2017-06-07 17:51:30*/'use strict';module.exports = function(gulp, plugin, config,browserSync){gulp.task('scriptTask', function(){return gulp.src(config.scriptFile.src).pipe(plugin.cache(plugin.jshint())).pipe(plugin.jshint.reporter('default'))// 对代码进行报错提示.pipe(plugin.uglify()).pipe(gulp.dest(config.scriptFile.dest)).pipe(browserSync.reload({stream: true}));});};

bower.js

/** @Author: wdl* @Date:   2017-06-05 09:56:06* @Last Modified by:   wdl* @Last Modified time: 2017-06-06 16:15:46*/'use strict';module.exports = function(gulp, plugin, config,browserSync){var concat = require("gulp-concat");var minifyCSS = require('gulp-minify-css')gulp.task('bower', function() {var bower_folder = "bower_components";var src = {js: [bower_folder + '/jquery/dist/jquery.min.js',bower_folder + '/bootstrap/dist/js/bootstrap.min.js',bower_folder + '/bootstrap/dist/js/tableExport.js','./build/js/header.js',],css: [// bower_folder + "/bootstrap/dist/css/bootstrap.min.css",bower_folder + "/bootstrap/dist/css/bootstrap.css","./build/css/header.css",],font:[bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',bower_folder + '/boobf60tstrap/dist/fonts/glyphicons-halflings-regular.woff2',],DashboardPlugin:{js: [bower_folder + '/bootstrap/dist/js/bootstrap-datetimepicker.min.js',bower_folder + '/bootstrap/dist/js/bootstrap-table.js',bower_folder + '/bootstrap/dist/js/bootstrap-editable.js',bower_folder + '/bootstrap/dist/js/bootstrap-table-export.js',bower_folder + '/bootstrap/dist/js/bootstrap-table-zh-CN.min.js',bower_folder + '/FileSaver/FileSaver.min.js',bower_folder + '/jsPDF/jquery.base64.js',bower_folder + '/jsPDF/jspdf.js',bower_folder + '/jsPDF/mybasejs.js',bower_folder + '/pdfmake/pdfmake.js',bower_folder + '/pdfmake/vfs_fonts.js',],css: [bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",bower_folder + "/bootstrap/dist/css/bootstrap-table.css",bower_folder + "/bootstrap/dist/css/bootstrap-editable.css",// bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",]},AvaInsightPlugin:{js: [bower_folder + '/jquery-ui-1.10.3.custom.min.js',bower_folder + '/bootstrap/dist/js/bootstrap-datetimepicker.min.js',bower_folder + '/highchart/highcharts.js',bower_folder + '/zTree_v3-master/js/jquery.ztree.core.js',bower_folder + '/jQDateRangeSlider/jQDateRangeSlider-min.js',],css: [bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",bower_folder + '/jQDateRangeSlider/iThing.css',bower_folder + '/zTree_v3-master/css/zTreeStyle/zTreeStyle.css',// bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",],img:[bower_folder + '/zTree_v3-master/css/zTreeStyle/img/*.*',]},}//合并第三方jsgulp.src(src.js).pipe(concat("vendor.js")).pipe(gulp.dest( config.scriptFile.dest));//合并第三方cssgulp.src(src.css).pipe(concat("vendor.css")).pipe(minifyCSS()).pipe(gulp.dest(config.styleFile.dest));// //复制 font 到/dist/font/文件夹gulp.src(src.font).pipe(gulp.dest('build/fonts'));//dashboard所需plugingulp.src(src.DashboardPlugin.js).pipe(concat("DashboardPlugin.js")).pipe(gulp.dest( config.pluginjs.dest));gulp.src(src.DashboardPlugin.css).pipe(concat("DashboardPlugin.css")).pipe(gulp.dest( config.plugincss.dest));//AvaInsight所需plugingulp.src(src.AvaInsightPlugin.js).pipe(concat("AvaInsightPlugin.js")).pipe(gulp.dest( config.pluginjs.dest));gulp.src(src.AvaInsightPlugin.css).pipe(concat("AvaInsightPlugin.css")).pipe(gulp.dest( config.plugincss.dest));gulp.src(src.AvaInsightPlugin.img).pipe(gulp.dest( config.plugincss.dest+'/img'));});};

config.json

{"imageFile" : {"src" : "src/img/**/*.{jpg,png,gif}","dest" : "build/img"},"styleFile" : {"src" : "src/css/**/*.css","dest" : "build/css"},"scriptFile" : {"src" : "src/js/**/*.js","dest" : "build/js"},"pageFile" : {"src" : "src/**/*.html","dest" : "build/"},"bowerFile" : {"src" : "src/js/**/header.js","dest" : "build/js"},"pluginjs" : {"dest" : "build/plugin/js"},"plugincss" : {"dest" : "build/plugin/css"}}

先贴到这里，稍后补全