项目结构

Gulp是一个自动化构建工具可以帮助前端开发者通过自动化任务来管理工作流程。

Gulp使用Node.js的代码编写可以更加灵活地管理代码以及任务流程.

对于Vue.js前端框架使用Gulp并不是必须的因为Vue.js提供了Vue-cli可以帮助前端开发者快速搭建项目以及项目的构建环境。

Vue-cli是一个基于Webpack的脚手架工具可以快速创建Vue.js应用程序并且帮助生成项目骨架以及构建系统。

其内置了webpack、Babel、ESLint等工具可以方便地进行模块打包、ES6转换、代码检查等。

使用Vue-cli可以弹性地对项目进行管理和构建。

但是对于一些需要个性化开发的开发者来说Vue-cli的功能是不够的。

前端开发者需要使用其他的构建工具来满足他们的需求比如Gulp。

使用Gulp可以帮助开发者扩展Vue-cli的功能同时使构建流程更加简单例如使用Gulp可以定制SASS/LESS文件编译、CSS文件合并压缩、JS文件压缩混淆、图片压缩等等。

这样可以方便地定制应用程序及其构建流程同时减少重复操作。

而且使用Gulp也可以减少构建速度。

Vue-cli虽然帮助我们构建了项目骨架以及构建环境但是在打包大规模的代码时打包速度较慢。

使用Gulp可以在webpack后处理流程中进行Sass编译、Html统一压缩等操作并提高构建速度。

总之对于Vue.js前端框架使用Gulp并不是必须的但是它提供了扩展功能、使构建流程更加简单、加快了打包速度等优点。

使用Gulp进行项目的构建可以为前端开发者节省时间、精力并且优化构建方式。

因此个性化开发需要Gulp的前端开发者可以使用它对Vue-cli进行扩展而其余开发者可以继续使用Vue-cli快速构建Vue.js应用程序。

VUE使用Gulp

首先我们需要安装所需的依赖。

我们需要全局安装Gulp通过npm命令安装

npm

接下来我们需要在项目根目录下安装Gulp和其他依赖比如babel、browserify等

npm

gulp.task(create:versionCatalog,

function

gulp.src(${distPath}/static/**/*)

.pipe(gulp.dest(${versionPath}/static/))

});

替换${versionPath}/static/js/manifest.js

function

gulp.src(${versionPath}/static/js/manifest.js)

.pipe($.replace(new

RegExp(${require(./config).build.assetsPublicPath},

g),

.pipe(gulp.dest(${versionPath}/static/js/))

});

替换${versionPath}/static/config/index-${env}.js

window.SITE_CONFIG[version]配置变量

function

gulp.src(${versionPath}/static/config/index-${env}.js)

.pipe($.replace(/window.SITE_CONFIG\[version\]

.*/g,

.pipe(gulp.dest(${versionPath}/static/config/))

});

合并${versionPath}/static/config/[index-${env},

init].js

gulp.src([${versionPath}/static/config/index-${env}.js,

${versionPath}/static/config/init.js])

.pipe(gulp.dest(${distPath}/config/))

});

gulp.task(default,gulp.series(gulp.series(build,create:versionCatalog,replace:cdnUrl,replace:version,concat:config,cleanBuild)));

package.json

rm(path.join(config.build.assetsRoot,

config.build.assetsSubDirectory),

err

process.stdout.write(stats.toString({

colors:

rm(path.join(config.build.assetsRoot,

config.build.assetsSubDirectory),

err

process.stdout.write(stats.toString({

colors:

require(extract-text-webpack-plugin)

const

require(optimize-css-assets-webpack-plugin)

const

require(uglifyjs-webpack-plugin)

const

config.build.productionSourceMap,

extract:

config.build.productionSourceMap

config.build.devtool

utils.assetsPath(js/[name].js),

chunkFilename:

config.build.productionSourceMap,

parallel:

utils.assetsPath(css/[name].css),

allChunks:

config.build.productionSourceMap

safe:

webpack.HashedModuleIdsPlugin(),

new

webpack.optimize.ModuleConcatenationPlugin(),

new

webpack.optimize.CommonsChunkPlugin({

name:

webpack.optimize.CommonsChunkPlugin({

name:

webpack.optimize.CommonsChunkPlugin({

name:

config.build.assetsSubDirectory,

ignore:

require(compression-webpack-plugin)

new

config.build.productionGzipExtensions.join(|)

threshold:

(config.build.bundleAnalyzerReport)

const

require(webpack-bundle-analyzer).BundleAnalyzerPlugin

analyzerMode:

require(extract-text-webpack-plugin)

const

require(optimize-css-assets-webpack-plugin)

const

require(uglifyjs-webpack-plugin)

const

config.build.productionSourceMap,

extract:

config.build.productionSourceMap

config.build.devtool

utils.assetsPath(js/[name].js),

chunkFilename:

config.build.productionSourceMap,

parallel:

utils.assetsPath(css/[name].css),

allChunks:

config.build.productionSourceMap

safe:

webpack.HashedModuleIdsPlugin(),

new

webpack.optimize.ModuleConcatenationPlugin(),

new

webpack.optimize.CommonsChunkPlugin({

name:

webpack.optimize.CommonsChunkPlugin({

name:

webpack.optimize.CommonsChunkPlugin({

name:

config.build.assetsSubDirectory,

ignore:

require(compression-webpack-plugin)

new

config.build.productionGzipExtensions.join(|)

threshold:

(config.build.bundleAnalyzerReport)

const

require(webpack-bundle-analyzer).BundleAnalyzerPlugin

analyzerMode: