gulp#4.0
4.0 Gulp
2023-09-11 14:16:38 时间
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'))
相关文章
- .net 多线程发展1.0--4.0
- .NET framework 4.0安装失败怎么办
- 《SAFe 4.0参考指南:精益软件与系统工程的规模化敏捷框架》一2.4 原则#4——通过快速集成学习环,进行增量式构建
- gulp#4.0 Did you forget to signal async completion?
- HTTP 错误 500.21 - Internal Server Error 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler”
- 《圣殿祭司的ASP.NET4.0专家技术手册》----2-3 C# 4.0静态基础融入动态能力
- https://github.com/coolnameismy/BabyBluetooth github上的一个ios 蓝牙4.0的库并带文档和教程
- 在唯一密钥属性“name”设置为“ExtensionlessUrlHandler-Integrated-4.0”时,无法添加类型为“add”的重复集合项
- IBM Analytics工业4.0与物联网白皮书
- VoltDB公布4.0版本号,大步提高内存实时分析速度,进军操作数据库市场
- 10天掌握webpack 4.0 tapable (2) SyncBailHook
- 4.0 TypeScript编译