最近看了下gulp4.0的升级，感觉和3.0相比变化还是比较大的，很多3.0的写法和插件会出现一些莫名其妙的变化，详细的变化就先不说了，这里我直接把我配置好的代码拿过来吧，方便各位可以更好的学习和使用（下面代码经过本人尝试，可以正确无误的运行）

gulp4.0 github源码

1，目录结构

app下面的文件夹就不用多介绍了吧，都是存放的一些基本的静态资源，这里着重说下为啥会多了一个tpl文件夹。

之所以单独列出一个tpl文件夹其实是为了使用gulp-file-include，里面其实存放的是一些html的模板，

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="./css/styles.css" />

    <script type="text/javascript" src="./js/index.js"/>

</head>

<body>

@@include('./header.html',{"index":"index"})

hello I am the demo page

<div class="main">mickey</div>

<!-- footer -->

@@include('./footer.html',{"param": "我是传递过来的备案号","index":"index"})

</body>

</html>

　　

_include/footer.html

<div>footer @@param</div>

_include/header.html

<div>

    <span @@if(context.index === 'index'){style='color:red'}>首页</span>

    <span @@if(context.index === 'aboutus'){style='color:red'}>关于我们</span>

</div>

具体语法我就不解释了，知道tpl里面存放的是什么东西就可以了。

2，package.json

{

  "name": "mickey-gulp-demo1",

  "version": "1.0.0",

  "description": "this is a demo project",

  "main": "gulpfile.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "gulp"

  ],

  "author": "mickey007@163.com",

  "license": "ISC",

  "devDependencies": {

    "@babel/core": "^7.4.3",

    "@babel/preset-env": "^7.4.3",

    "autoprefixer": "^9.5.1",

    "babel-preset-env": "^1.7.0",

    "browser-sync": "^2.26.3",

    "del": "^4.1.0",

    "gulp": "^4.0.0",

    "gulp-babel": "^8.0.0",

    "gulp-clean": "^0.4.0",

    "gulp-clean-css": "^4.0.0",

    "gulp-concat": "^2.6.1",

    "gulp-connect": "^5.7.0",

    "gulp-file-include": "^2.0.1",

    "gulp-htmlmin": "^5.0.1",

    "gulp-imagemin": "^5.0.3",

    "gulp-load-plugins": "^1.5.0",

    "gulp-make-css-url-version": "^0.0.13",

    "gulp-postcss": "^8.0.0",

    "gulp-rev": "^9.0.0",

    "gulp-rev-all": "^1.0.0",

    "gulp-rev-collector": "^1.3.1",

    "gulp-rev-replace": "^0.4.4",

    "gulp-sass": "^4.0.2",

    "gulp-uglify": "^3.0.2",

    "gulp-useref": "^3.1.6",

    "gulp-watch": "^5.0.1"

  }

}

这个配置文件就比较重要了，所有的包和版本都在这里，使用的时候不要忘记执行 npm install 哦

3，gulpfile.js

const {src, dest, watch, series, parallel} = require('gulp')

const del = require('del');

//处理md5文件名

const revAll = require('gulp-rev-all');

const revReplace = require('gulp-rev-replace');

const cssver = require('gulp-make-css-url-version');

const sass=require('gulp-sass');

const postcss = require('gulp-postcss');

const autoprefixer = require('autoprefixer');

const cleancss = require('gulp-clean-css');

const babel=require('gulp-babel');

const uglify = require('gulp-uglify');

const imagemin = require('gulp-imagemin')

const htmlmin = require('gulp-htmlmin');

const fileinclude = require('gulp-file-include');

const connect = require('gulp-connect');

//配置路径

const baseUrl = './app/';

const distUrl = './dist/';

const tplUrl = './tpl/';

const configUrl = {

    file: {

        css: baseUrl + 'css/**/*.css',

        scss: baseUrl + 'scss/**/*.scss',

        images: baseUrl + 'images/**/*',

        js: baseUrl + 'js/**/*.js',

        libs: baseUrl + 'js/libs/**/*.js',

        fonts: baseUrl + 'fonts/**/*',

        html: baseUrl + '**/*.html',

        tpl: tplUrl + '**/*.html',

        tpl_include: tplUrl + '_include/**/*.html'

    },

    folder: {

        css: baseUrl + 'css',

        html: baseUrl

    },

    dist: {

        css: distUrl + 'css',

        images: distUrl + 'images',

        js: distUrl + 'js',

        html: distUrl,

        rev: distUrl + 'rev'

    }

}

//删除dist

const clean = () => del([distUrl])

//删除生成的html文件，保留文件夹

const cleanHtml = () => del([configUrl.file.html])

const scss = () => src(configUrl.file.scss)

    .pipe(sass().on('error', sass.logError))

    .pipe(postcss([autoprefixer(

        {

            // 兼容主流浏览器的最新两个版本

            browsers: ['last 2 versions'],

            // 是否美化属性值

            cascade: false

        }

    )]))

    .pipe(dest(configUrl.folder.css));

const baleCss = () => src(configUrl.file.css)

    .pipe(cssver())

    .pipe(cleancss({

        compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

        format: 'keep-breaks',//是否保留换行

        keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀

    }))

    .pipe(revAll.revision({"fileNameManifest":"rev-css-manifest.json"}))

    .pipe(dest(configUrl.dist.css))

    .pipe(revAll.manifestFile())

    .pipe(dest(configUrl.dist.rev));

const baleJs = () => src([configUrl.file.js,'!' + configUrl.file.libs])

    .pipe(babel({ presets: ['@babel/env'] })) // ES6转ES5

    .pipe(uglify({

        mangle:true,//类型：Boolean 默认：true 是否修改变量名  排除混淆关键字

        compress:true,//类型：Boolean 默认：true 是否完全压缩

    }))

    .pipe(revAll.revision({"fileNameManifest":"rev-js-manifest.json"}))

    .pipe(dest(configUrl.dist.js))

    .pipe(revAll.manifestFile())

    .pipe(dest(configUrl.dist.rev));

const baleImages = () => src(configUrl.file.images)

    .pipe(imagemin({

        progressive: true,//类型：Boolean 默认：false 多次优化svg直到完全优化

        svgoPlugins: [{removeViewBox: false}]//不要移除svg的viewbox属性

    }))

    .pipe(dest(configUrl.dist.images))

// const baleHtml = () => src([baseUrl + 'index.html',baseUrl + 'views/*.html'],{base: baseUrl})

const baleHtml = () => src(configUrl.file.html)

    .pipe(htmlmin({

        removeComments: true,//清除HTML注释

        collapseWhitespace: true//压缩HTML

    }))

    .pipe(revReplace({manifest:src(configUrl.dist.rev + '/*.json')}))

    .pipe(dest(configUrl.dist.html));

const baleCopy = () => src([configUrl.file.fonts,configUrl.file.libs],{base: baseUrl})

    .pipe(dest(distUrl))

const file = () => src([configUrl.file.tpl,'!' + configUrl.file.tpl_include])

    .pipe(fileinclude({

        prefix: '@@',//变量前缀 @@include

        basepath: './tpl/_include',//引用文件路径

        indent:true//保留文件的缩进

    }))

    .pipe(dest(configUrl.folder.html));

const reload = () => src(configUrl.file.html)

    .pipe(connect.reload());

const watchs = () => {

    watch(configUrl.file.tpl,series(cleanHtml,file));

    watch(configUrl.file.scss,scss);

    watch(baseUrl + "**/*.*", reload);

    connect.server({

        root: baseUrl,

        port: 8080,

        livereload: true,

    });

}

exports.file = file;

exports.clean = clean;

//启动项目

exports.default = watchs;

//打包项目

exports.build = series(clean,parallel(baleCss, baleJs, baleImages, baleCopy),baleHtml);

这里本地调试我使用的app文件夹下面的代码，执行gulp watchs 或者 gulp 后会启动一个本地服务来运行app下面的代码

gulp build 是打包生产的代码，打包的地址在根目录的dist文件夹下，打包上传服务器即可

项目源码地址：https://github.com/blueskyli/gulp-4.0

gulp4.0 前端构建脚手架的更多相关文章

  1. webpack前端构建angular1.0！！！

    webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...

  2. 前端构建大法 Gulp 系列 (一)：为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  3. 前端构建工具之gulp_常用插件

    gulp常用插件的使用 今天来看看一下gulp的常用插件的使用 就像gruntjs需要一个Gruntfile.js文件一样,gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfil ...

  4. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  5. gulp插件(gulp-jmbuild)，用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  6. 前端构建：Source Maps详解

    一.前言 当使用CoffeeScript.ClojureScript编写前端脚本时,当使用Less.Sacc编写样式规则时,是否觉得调试时无法准确找到源码位置呢?当使用jquery.min.js等经压 ...

  7. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  8. 前端构建工具gulpjs

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  9. 前端构建利器Grunt—Bower

    runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...

随机推荐

  1. Ubuntu14.04下安装Cuda8.0

    https://blog.csdn.net/sinat_19628145/article/details/60475696 https://developer.nvidia.com/cuda-down ...

  2. 关于java的volatile关键字与线程栈的内容以及单例的DCL

    用volatile修饰的变量,线程在每次使用变量的时候,都会读取变量修改后的最新的值.volatile很容易被误用,用来进行原子性操作. package com.guangshan.test; pub ...

  3. 最佳编程字体：M+

    英文原文:The Best Font for Programming: M+ 程序员的最佳等宽字体是 M+. 一个偶然机会遇到了这个字体,在命运多舛的  kod 编辑器体验了.这个字体非比寻常,我坚持 ...

  4. Android-Java-Thread的使用

    main线程跑三个任务: package android.java.thread2; class Demo { private String name; public Demo(String name ...

  5. 使用redis实现【统计文章阅读量】及【最热文章】功能

    1.视图函数 # 不需要登录装饰器,匿名用户也可访问def article_detail(request, id, slug): # print(slug,id) article = get_obje ...

  6. 使用MEF与Castle实现AOP

    MEF是微软的一个ioc框架,使用非常方便,我们只需要在需要导出的类上标记[Export],在需要使用的地方[import]就可以使用了.现在我们扩展MEF,在其装配生成实例时,使用Castle Dy ...

  7. Angular6 学习笔记——内容投影, ViewChild和ContentChild

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  8. 构建NetCore应用框架之实战篇系列

    构建NetCore应用框架之实战篇 构建NetCore应用框架之实战篇(一):什么是框架,如何设计一个框架 构建NetCore应用框架之实战篇(二):BitAdminCore框架定位及架构 构建Net ...

  9. javascript js 完美解决 click 与 dblclick 冲突，并且不会导致click延迟

    示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar ...

  10. “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 System.Windows.Forms.dll 中发生

    最近做一个winform项目,在里面用了webbrowser控件进行html文档打印,遇到了标题所示问题.根据查到的一些资料,在调试>异常>查找中输入“System.Runtime.Int ...