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. Redis自学笔记 --string类型

    string类型                                                                                  set 赋值 get ...

  2. Aliasing input/output properties

    angular @input alias别名的使用. https://angular.io/guide/template-syntax#aliasing-io https://stackoverflo ...

  3. (LeetCode 160)Intersection of Two Linked Lists

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  4. 免费的HTML模板引导 - lonely

    ​在线演示 本地下载 今天和大家分享另一款模板-Lonely.它可以被用在一些个人或者类似简单一些的网站上,动画效果的滚动非常特别!

  5. Android 之Toast

    Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于一些帮助 / 提示. Toast 最常 ...

  6. IDEA+Gradle相关资料

    要注意下载的版本,不能过于陈旧,否则会报错,导致无法正常配置. 具体配置参考:https://my.oschina.net/u/1994816/blog/297967 IDEA下载地址:https:/ ...

  7. MySQL Cluster管理节点配置文件-数据节点4G内存

    自己测试机器上搭建使用,大家可以参考一下 [NDBD DEFAULT] #TotalSendBufferMemory = 256M NoOfReplicas=2 DataMemory=2500M In ...

  8. YUM常用命令详解

    yum是一个用于管理rpm包的后台程序,用python写成,可以非常方便的解决rpm的依赖关系.在建立好yum服务器后,yum客户端可以通过 http.ftp方式获得软件包,并使用方便的命令直接管理. ...

  9. openerp 7.0 来自外部的邮件会发送二次问题解决方法

    插入代码:\addons\mail\mail_mail.py #309 line this = self.pool.get('res.users').browse(cr, uid, uid, cont ...

  10. maven 找不到或无法加载主类

      maven 找不到或无法加载主类 CreateTime--2018年4月19日22:58:14 Author:Marydon 1.情景还原: 在maven管理的web项目中,单独运行Java类报错 ...