gitbook教程:

https://dragon8github.gitbooks.io/gulp-webpack/content/an-zhuang-gulp-4-0.html

gulpfile.js

// cnpm i -g gulpjs/gulp#4.0 && cnpm i gulpjs/gulp#4.0 gulp-sass fs-extra gulp-autoprefixer gulp-sourcemaps browser-sync gulp-ejs gulp-rename gulp-babel babel-core babel-preset-env babel-preset-stage-2 gulp-typescript typescript -S
const gulp = require('gulp')
const babel = require('gulp-babel')
const ts = require('gulp-typescript')
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps')
const rename = require('gulp-rename')
const browserSync = require('browser-sync').create()
const fse = require('fs-extra')
const path = require('path'); // 初始化
gulp.task('init', function () {
// 获取当前文件路径(兼容windows)
var PWD = process.env.PWD || process.cwd();
var dirs = ['dist',
'dist/html',
'dist/css',
'dist/img',
'dist/js',
'src','src/sass',
'src/js',
'src/img',
'src/sprite'
]; dirs.forEach(function (item,index) {
try {
// 使用mkdirSync方法新建文件夹
fse.mkdirSync(path.join(PWD + '/'+ item));
} catch (err) {
console.log(err.message);
}
})
}) // 编译typescript
gulp.task('ts', function () {
return gulp.src('./src/js/*.ts')
.pipe(ts({
'noImplicitAny': true,
'declaration': true,
'target': 'es5'
}))
.js.pipe(gulp.dest('./dist/js/'))
}) // 编译babel
gulp.task('babel', function () {
return gulp.src('./src/js/*.es')
.pipe(sourcemaps.init())
.pipe(babel({
presets: [
[
'env',
{
'targets': {
'browsers': ['last 5 versions', 'ie >= 8']
}
}
],
'babel-preset-stage-2'
]
}))
.pipe(sourcemaps.write('./map')) // 这里的地址是相对于gulp.dest输出目录的,并且必须在gulp.dest输出之前执行
.pipe(gulp.dest('./dist/js')) }) // 编译sass
gulp.task('sass', function () {
return gulp.src('./src/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'],
cascade: true,
remove: true
}))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./map')) // 这里的地址是相对于gulp.dest输出目录的,并且必须在gulp.dest输出之前执行
.pipe(gulp.dest('./dist/assets/css'))
}) // watch
gulp.task('watch', function () {
// 监听重载文件
var files = [
'src/html/*.html',
'src/css/*.css',
'src/js/*.es',
'src/js/*.ts',
'src/sprite/*.png'
]
browserSync.init(files, {
server: {
baseDir: './src/html/',
}
})
gulp.watch('./src/sass/*.scss', gulp.series('sass'))
gulp.watch('./src/js/*.es', gulp.series('babel'))
gulp.watch('./src/js/*.js', gulp.series('babel'))
gulp.watch('./src/html/*.html').on('change', browserSync.reload)
}) // 开发环境
gulp.task('dev', gulp.series('init', gulp.parallel('sass', 'babel', 'ts'), 'watch'))

gulp#4.0的更多相关文章

  1. Gulp 从0开始

    http://www.w3ctech.com/topic/134  (该文章有很多错误) http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97 ...

  2. gulp#4.0 Did you forget to signal async completion?

    异常截图 解决方案: https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-compl ...

  3. gulp顺序执行任务

    gulp的任务的执行是异步的. 所以,当我写完一系列的任务,准备一股脑地执行. # gulp.task('prod', ['clean', 'compass', 'image', 'style', ' ...

  4. 前端工程筹建NodeJs+gulp+bower

    1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...

  5. 前端工程搭建NodeJs+gulp+bower

    需要node.npm的事先安装!! 1.nodejs安装程序会在环境变量中添加两个变量: 系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.ex ...

  6. gulp实用配置(2)——中小项目

    上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指co ...

  7. gulp的安装与使用【附配置代码】

    备忘 1.配置 下载安装node.js node -v //检查nodejs版本   npm(nodejs package manager)nodejs包管理工具   nodejs完毕在命令行输入np ...

  8. gulp学习-metamask前端使用

    https://www.gulpjs.com.cn/docs/getting-started/ ,这个是3.9.0版本 后面发现安装的版本是4.0.0,看下面这个: https://github.co ...

  9. 使用gulp 合并压缩打包,实时监控文件,实现本地server

    今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gu ...

随机推荐

  1. Oracle Agile PLM Web Services 的实现

    Oracle 的产品Agile PLM内置了许多Web Services,其他系统可以通过Web Servcies实现对Agile PLM系统资源的访问.快速学会使用的方法,是去Oracle的官网下载 ...

  2. C#类似版本号有多个分割符可以产生的排列组合,类似版本号比较

    我采用asp.net进行演示 送给有缘人吧,可以获得类似版本号的功能,也可以对比两个版本号,我这里是其他需要用逗号分割的 using System; public partial class _Def ...

  3. Fusioncharts的导出图片訪问官网问题

    Fusioncharts3.5使用自带的导出功能,须要訪问官网 问题描写叙述:使用fusioncharts自带的exportchart方法来导出图片的时候.要訪问export.api3.fusionc ...

  4. Android 之布局(二)

    3.TableLayout(表格布局) 像表格一样布局,通常情况下,TableLayout有多个TableRow组成,每个TableRow就是一行. <?xml version="1. ...

  5. git 使用流程(使用代码库github)

    一:先在github 上注册账号,并创建一个项目: 二:mac 命令行-进入自己的工作空间 1:建立库     git init 2:初始化配置 git config --global user.na ...

  6. uva 11181 - Probability|Given(概率)

    题目链接:uva 11181 - Probability|Given 题目大意:有n个人去超市买东西,给出r,每个人买东西的概率是p[i],当有r个人买东西的时候,第i个人恰好买东西的概率. 解题思路 ...

  7. android 随手记 读写文件的几种方式

    java中多种方式读文件 一.多种方式读文件内容. 1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内容 4.随机读取文件内容 */ import java.io.BufferedRe ...

  8. matlab histeq函数介绍

    Histeq Enhance contrast using histogram equalization 该函数通过直方图均衡化来添加对照度 Syntax J = histeq(I,hgram) De ...

  9. 用JavaScript 来创建 mac os x 程序这样是否好

    在网上看到的文章: 用 JavaScript 编写 OS X 应用 (Tyler Gaw)   这个文章的内容是不错的. 可是思路呢? 我们假设想学一种方法或工具,这样做好吗? 我看了上面的代码.假设 ...

  10. eclipse properties文件插件

      eclipse properties插件 CreateTime--2018年4月22日22:51:34 Author:Marydon 下载地址:properties文件插件.rar 1.将plug ...