gulp4.0 前端构建脚手架

最近看了下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 前端构建脚手架的更多相关文章

webpack前端构建angular1.0！！！
webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...
前端构建大法 Gulp 系列 (一)：为什么需要前端构建
系列目录前端构建大法 Gulp 系列 (一):为什么需要前端构建前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
前端构建工具之gulp_常用插件
gulp常用插件的使用今天来看看一下gulp的常用插件的使用就像gruntjs需要一个Gruntfile.js文件一样,gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfil ...
前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
gulp插件(gulp-jmbuild)，用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...
前端构建：Source Maps详解
一.前言当使用CoffeeScript.ClojureScript编写前端脚本时,当使用Less.Sacc编写样式规则时,是否觉得调试时无法准确找到源码位置呢?当使用jquery.min.js等经压 ...
前端构建工具gulp介绍
2016年3月3日 10:46:08 晴前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
前端构建工具gulpjs
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
前端构建利器Grunt—Bower
runt + Bower—前端构建利器目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...

随机推荐

hdu 1300 Deck
题目分析:对于n张卡片的最佳摆法,我们只需要在n-1张卡片的摆法下面加一张边缘与桌檐重合的卡片,并将所有卡片一起向桌檐外移动.对于一种最佳摆法,其中心一定在桌檐上,所以一定符合杠杆原理,支点是桌檐. ...
WindowsPhone 8.1 语音命令资料
快速入门:语音命令(XAML) http://msdn.microsoft.com/library/windows/apps/xaml/dn630430.aspx/ 语音命令元素和属性参考(XAML) ...
WinRT 中检查 WiFi 是否可用
public static bool IsWifiConnected() { bool isWifiConnected = false; ConnectionProfile currentConnec ...
曲演杂坛--Update的小测试
今天偶然想起一个UPDATE相关的小问题,正常情况下,如果我们将UPDATE改写成与之对应的SELECT语句,其SELECT查询结果应与UPDATE的目标表存在一对一的关系,例如: 对于UPDATE语 ...
python 实现敏感词屏蔽小程序
有一个文件,里面有一些敏感词汇,如果输入这些词,就用**代替,然后输出.敏感词汇 dictionary.txt 文件内容: SB,傻B,傻逼,妈,日,shabi,操,sb,金三胖代码实现主体: f ...
解决微服务网关Ocelot使用AddStoreOcelotConfigurationInConsul后请求404问题
一个小插曲,最近研究 netcore 微服务网关,在使用AddStoreOcelotConfigurationInConsul将配置存到consul后,任何经过网关的请求都出现404,并且没有任何有用 ...
MySQL使用 IN 查询取出数据排序问题（与in排序相同、不排序）
MySQL使用 IN 查询取出数据排序问题(与in排序相同) 今天在项目中遇到一个问题,就是做一个最近浏览的功能,但是功能做出来了,取出数据时候要用到类似这么一条带in查询的sql语句, select ...
Restframework 渲染器 render 组件实例-4
渲染器默认存放位置: 在默认配置下 default-settings里 (APIVIEW点击去--> 1. renderer_classes = api_settings.DEFAULT_REN ...
LOJ#3088. 「GXOI / GZOI2019」旧词（树剖+线段树）
题面传送门题解先考虑\(k=1\)的情况,我们可以离线处理,从小到大对于每一个\(i\),令\(1\)到\(i\)的路径上每个节点权值增加\(1\),然后对于所有\(x=i\)的询问查一下\(y ...
django 视图中执行原生的 sql 查询语句
可以使用objects的raw()方法执行原生的sql语句,进行对数据库的查询操作,raw()方法只能执行查询语句 query_set = your_model.objects.raw("s ...

gulp4.0 前端构建脚手架

1，目录结构

3，gulpfile.js

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

随机推荐

热门专题