记录下自己写的gulp打包脚本
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记录下自己写的gulp打包脚本相关的知识,希望对你有一定的参考价值。
var c = { rootPath: ‘src‘,//项目文件夹 outputPath: ‘output‘,//文件编译后的输出目录 revPath: ‘manifest‘,//rev映射文件目录 appjs: ‘app.js‘,// run JS homePage: ‘index.html‘, cssFolderPaths: [‘css‘],//需要压缩的CSS目录 jsFolderPaths: [‘model‘],//需要压缩的JS目录 ngjsFolderPaths: [‘app‘, ‘common‘, ‘directives‘, ‘filters‘],//需要压缩的ngJS目录 htmlFolderPaths: [‘app‘, ‘layout‘], filterFolderPaths: [‘frameworks‘, ‘images‘] }; var root = function (path) { if (path) return c.rootPath + ‘/‘ + path return c.rootPath; }; var output = function (path) { if (path) return c.outputPath + ‘/‘ + path return c.outputPath; } var fs = require(‘fs‘); var path = require(‘path‘); var gulp = require("gulp"), clean = require(‘gulp-clean‘), ngAnnotate = require(‘gulp-ng-annotate‘),//压缩ngjs util = require(‘gulp-util‘), filter = require(‘gulp-filter‘), ngmin = require(‘gulp-ngmin‘), stripDebug = require(‘gulp-strip-debug‘), minifyhtml = require("gulp-minify-html"),//压缩html minify = require("gulp-minify-css"),//压缩css uglify = require("gulp-uglify"),//压缩代码 rename = require("gulp-rename"),//重命名 concat = require("gulp-concat"),//合并代码 sourcemaps = require("gulp-sourcemaps"), rev = require("gulp-rev"),//对文件名加MD5后缀 revReplace = require("gulp-rev-replace"),//路径替换 merge = require("merge-stream"); //入口命令 gulp.task(‘run‘, [‘clear‘], function () { setTimeout(function () { gulp.run([ ‘filter‘, ‘css‘, ‘html‘, ‘global‘, ‘model‘, ‘ngjs‘], function () { var manifest = gulp.src("./" + c.revPath + ‘/*.json‘); return gulp.src([root(c.homePage)]) .pipe(revReplace({ manifest: manifest })) .pipe(gulp.dest(c.outputPath)); }); }, 2000); }); //所有不需要压缩及合并的目录 gulp.task(‘filter‘, function () { return c.filterFolderPaths.map(function (cpath) { return gulp.src([root(cpath + ‘/**‘)]) .pipe(gulp.dest(output(cpath))); }); }); //压缩css gulp.task(‘css‘, function () { var tasks = c.cssFolderPaths.map(function (cpath) { return gulp.src([root(cpath + ‘/**/*.css‘)]) .pipe(minify()) .pipe(rev()) .pipe(gulp.dest(output(cpath))) .pipe(rev.manifest(cpath + ‘.json‘)) .pipe(gulp.dest(‘./‘ + c.revPath)); }); return merge(tasks); }); //压缩html gulp.task(‘html‘, function () { var tasks = c.htmlFolderPaths.map(function (cpath) { return gulp.src([root(cpath + ‘/**/*.html‘)]) .pipe(minifyhtml()) .pipe(gulp.dest(output(cpath))); }); return merge(tasks); }); //压缩global js文件,并替换index.html中的引用 gulp.task(‘global‘, function () { return gulp.src([root(‘/*.js‘)]) .pipe(ngAnnotate()) .pipe(ngmin({ dynamic: false })) .pipe(stripDebug()) .pipe(uglify({ outSourceMap: false }))//压缩ngjs // .pipe(concat(c.appjs)) .pipe(rev()) //文件名加MD5后缀 .pipe(gulp.dest(c.outputPath)) .pipe(rev.manifest(‘global.json‘))//生成manifest.json .pipe(gulp.dest(‘./‘ + c.revPath)); }); //压缩model gulp.task(‘model‘, function () { var tasks = c.jsFolderPaths.map(function (cpath) { return gulp.src([root(cpath + ‘/**/*.js‘)]) .pipe(uglify()) .pipe(rev()) .pipe(gulp.dest(output(cpath))) .pipe(rev.manifest(cpath + ‘.json‘)) .pipe(gulp.dest(‘./‘ + c.revPath)); }); return merge(tasks); }); //压缩ngjs gulp.task(‘ngjs‘, function () { var tasks = c.ngjsFolderPaths.map(function (cpath) { return gulp.src([root(cpath + ‘/**/*.js‘)]) .pipe(uglify()) .pipe(rename(function (path) { if (path.basename.toLowerCase().indexOf(‘login‘) > -1) { path.basename = path.basename.toLowerCase(); } return path; })) .pipe(rev()) .pipe(gulp.dest(output(cpath))) .pipe(rev.manifest(cpath + ‘.json‘)) .pipe(gulp.dest(‘./‘ + c.revPath)); }); return merge(tasks); }); //清理目录 gulp.task(‘clear‘, function () { gulp.src(c.outputPath, { read: false }) .pipe(clean()); gulp.src(c.revPath, { read: false }) .pipe(clean()); gulp.src([‘dist‘, ‘rev‘], { read: false }) .pipe(clean()); //gulp.src(root(‘/**/*.*scc‘), { read: false }) // .pipe(clean()); });
以上是关于记录下自己写的gulp打包脚本的主要内容,如果未能解决你的问题,请参考以下文章
GruntGulp区别 webpack requirejs区别