zoukankan      html  css  js  c++  java
  • gulp简单使用

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

    gulpfile.js

    /**
     * Created by AAA on 2017/9/28.
     */
    var gulp = require('gulp');
    var del = require('del');//删除目录
    var autoprefixer = require('gulp-autoprefixer');//添加css兼容u
    var uglify = require('gulp-uglify');//压缩js
    var cssmin = require('gulp-minify-css');//压缩css
    var fileinclude = require('gulp-file-include');//公共文件引入
    var htmlmin = require('gulp-htmlmin');//压缩html
    //我并没有使用图片压缩,直接用的tinypng
    // 清除 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/include/*.html', ['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简直就是小天使

  • 相关阅读:
    leetcode -- Word Break
    [笔试题]MS 2014
    网络编程之TCP/IP各层详解
    深浅copy
    字符编码的转换
    Bytes类型
    Django之模型层(1)
    Django之模板层
    用Python操作文件
    hash(哈希)是什么
  • 原文地址:https://www.cnblogs.com/Merrys/p/7609393.html
Copyright © 2011-2022 走看看