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'), // 引入gulp concat = 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,// 压缩HTML minifyJS: true,// 压缩页面JS minifyCSS: 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 + '/bootstrap/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/*.*', ] }, } //合并第三方js gulp.src(src.js) .pipe(concat("vendor.js")) .pipe(gulp.dest( config.scriptFile.dest)); //合并第三方css gulp.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所需plugin gulp.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所需plugin gulp.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" } } 先贴到这里，稍后补全