gulp 搭建项目

来源：互联网发布：java 开发支付流程编辑：程序博客网时间：2024/06/05 03:42

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,// 压缩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"  }}

先贴到这里，稍后补全

阅读全文

0 0