官网常用 gulp配置文件

来源：互联网发布：怎样测试端口是否打开编辑：程序博客网时间：2024/06/16 10:34

官网项目结构如图：
这里写图片描述
需安装的插件package.json

{  "name": "gulptest",  "version": "1.0.0",  "description": "",  "main": "gulpfile.js",  "dependencies": {    "gulp": "^3.9.1",    "gulp-autoprefixer": "^3.1.1",    "gulp-concat": "^2.6.0",    "gulp-css-spriter": "^0.3.3",    "gulp-declare": "^0.3.0",    "gulp-handlebars": "^4.0.0",    "gulp-imagemin": "^3.0.3",    "gulp-less": "^3.1.0",    "gulp-minify-css": "^1.2.4",    "gulp-replace": "^0.5.4",    "gulp-ruby-sass": "^2.1.0",    "gulp-sourcemaps": "^1.6.0",    "gulp-uglify": "^2.0.0",    "gulp-util": "^3.0.7",    "gulp-watch-path": "^0.1.0",    "gulp-wrap": "^0.13.0",    "stream-combiner2": "^1.1.1"  },  "devDependencies": {    "del": "^2.2.2",    "gulp": "^3.9.1",    "gulp-changed": "^1.3.2",    "gulp-htmlmin": "^2.0.0",    "gulp-rename": "^1.2.2"  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC"}

gulpfile.js配置文件

var gulp = require('gulp');var minifyHTML = require('gulp-htmlmin');var uglify = require('gulp-uglify');var minifyCSS = require('gulp-minify-css');var imagemin = require('gulp-imagemin');var concat = require('gulp-concat');var del = require('del');var replace = require('gulp-replace');gulp.task('minifyHTML', function () {    gulp.src('*.html')        .pipe(minifyHTML({collapseWhitespace: true}))        .pipe(replace(/<script.*?>.*?>|<link.*?>|<\/head>/g, function (tag) {            if (/<link.*?>/.test(tag)) {                return "";            } else if (/<\/head>/.test(tag)) {                return '<link rel="stylesheet" href="css/all.css"></head>';            }        }))        .pipe(gulp.dest('dist'));});gulp.task('script', function () {    gulp.src('js/*.js')        .pipe(uglify())        .pipe(concat(new Date().getTime() + ".min.js"))//全部合并到all.js这个文件里        .pipe(gulp.dest('dist/js'))});gulp.task('css', function () {    gulp.src('css/*.css')        .pipe(minifyCSS())        .pipe(concat('all.css'))        .pipe(gulp.dest('dist/css'));});gulp.task('images', function () {    gulp.src('images/*.*')        .pipe(imagemin({            progressive: true        }))        .pipe(gulp.dest('dist/images'));});gulp.task('clean', function (cb) {    del([        /*  'dist/report.csv',        // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西        'dist/mobile/!**!/!*',        // 我们不希望删掉这个文件，所以我们取反这个匹配模式        '!dist/mobile/deploy.json'*/        'dist/*'    ], cb);});gulp.task('default', ['clean', 'minifyHTML', 'script', 'css', 'images']);

0 0