gulp简单使用

Posted 2020-10-08

公司项目需要优化，前端方面只要就是资源整合。拿另一个小项目试验：

gulpfile.js

/**
 * Created by AAA on 2017/9/28.
 */
var gulp = require(‘gulp‘);
var del = require(‘del‘);
var autoprefixer = require(‘gulp-autoprefixer‘);
var uglify = require(‘gulp-uglify‘);
var cssmin = require(‘gulp-minify-css‘);
var fileinclude = require(‘gulp-file-include‘);
var htmlmin = require(‘gulp-htmlmin‘);
// 清除 dist 文件夹
gulp.task(‘clean‘, function () {
    return del.sync(‘./dist‘);
});
// html 整合
gulp.task(‘dealHtml‘, function () {
    gulp.src([‘src/view/**.html‘])
        .pipe(fileinclude({
            prefix: ‘@@‘,
            basepath: ‘@file‘
        }))
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS
        }))
        .pipe(gulp.dest(‘dist‘));
});
//静态资源
gulp.task(‘dealJs‘, function () {
    gulp.src(‘src/view/assets/js/*.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dist/assets/js‘));
});
gulp.task(‘dealCss‘, function () {
    gulp.src(‘src/view/assets/style/*.css‘)
        .pipe(autoprefixer({
            browsers: [‘last 2 versions‘, ‘android >= 4.0‘],
            cascade: true, //是否美化属性值 默认：true
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(cssmin({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: ‘ie8‘,//保留ie7及以下兼容写法 类型：String 默认：‘‘or‘*‘ [启用兼容模式； ‘ie7‘：IE7兼容模式，‘ie8‘：IE8兼容模式，‘*‘：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: ‘*‘//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest(‘dist/assets/style‘));
});
gulp.task(‘dealImgs‘, function () {
    gulp.src(‘src/view/assets/pic/*.*‘)
        .pipe(gulp.dest(‘dist/assets/pic‘));
});
gulp.task(‘data‘, function () {
    gulp.src(‘src/view/assets/data/*.json‘).pipe(gulp.dest(‘dist/assets/data‘));
});
gulp.task("build", ["dealCss", "dealJs", "dealImgs", "data"]);
// 监控html
gulp.task(‘watch‘, function () {
    gulp.watch(‘src/view/*.*‘, [‘dealHtml‘]);
    gulp.watch(‘src/view/assets/*/*.*‘, ["build"]);
});

package.js

{
  "name": "huangzi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-file-include": "^1.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  },
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.2.0",
    "gulp-htmlmin": "^3.0.0"
  },
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

项目目录

控制台运行：

gulp watch //开发

gulp build //打包

 

讲真，有了webpack在前，gulp简直就是小天使