前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【前端】我的Gulp配置

【前端】我的Gulp配置

作者头像
zhaokang555
发布2023-10-17 09:48:12
1320
发布2023-10-17 09:48:12
举报

2. gulp + browserify

代码语言:javascript
复制
/**
 * File Name: gulpfile.js
 */

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
// 保证在当前项目目录下曾经运行过:
// npm install gulp-uglify gulp-rename gulp-babel babel-preset-es2015 ...... --save-dev
// var jshint = require('gulp-jshint');
var babel = require("gulp-babel");
var rename = require('gulp-rename');
var coffee = require('gulp-coffee');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var browserify = require('browserify');
// var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');

// 把src/script下的所有coffee逐个编译为js, 放在temp/script下
gulp.task('coffee', function() {
  gulp.src('./src/script/**/*.coffee')
      .pipe(coffee({bare: true}).on('error', gutil.log))
      .pipe(babel({presets: ['es2015']}))
      .pipe(gulp.dest('./temp/script'))

});

gulp.task('stylus', function() {
  gulp.src('./src/style/*.styl')
      .pipe(stylus())
      .pipe(gulp.dest('./public/'));
});

gulp.task('browserify', function() {
  browserify({
    entries: ['./temp/script/main.js'],
    debug: true, // 告知Browserify在运行同时生成内联sourcemap用于调试
  })
  // .transform("babelify", {presets: ["es2015"]})
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(buffer()) // 缓存文件内容
  .pipe(sourcemaps.init({loadMaps: true})) // 从 browserify 文件载入 map
  .pipe(sourcemaps.write('.')) // 写入 .map 文件
  .pipe(gulp.dest('public'))
  .pipe(notify({ message: 'browserify task complete' }));
})

// 监视文件的变化
gulp.task('watch', ['coffee', 'browserify', 'stylus'], function(){
  gulp.watch('./src/script/*.coffee', ['coffee'])
  gulp.watch('./src/style/*.styl', ['stylus'])
  gulp.watch('./temp/script/*.js', ['browserify'])
});

// 默认任务
gulp.task('default', ['coffee', 'browserify', 'stylus', 'watch']);

1.

代码语言:javascript
复制
/**
 * File Name: gulpfile.js
 */

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
// 保证在当前项目目录下曾经运行过:
// npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-babel babel-preset-es2015 ...... --save-dev
var jshint = require('gulp-jshint');
var babel = require("gulp-babel");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var coffee = require('gulp-coffee');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');

gulp.task('coffee', function() {
  gulp.src('./src/script/*.coffee')
      .pipe(coffee({bare: true}).on('error', gutil.log))
      .pipe(babel({presets: ['es2015']}))
      .pipe(concat('all.js'))
      // .pipe(rename('all.js'))
      .pipe(gulp.dest('./public')) // distribution
      .pipe(uglify())
      .pipe(rename('all.min.js'))
      .pipe(gulp.dest('./public')); // distribution
});

gulp.task('stylus', function () {
  gulp.src('./src/style/*.styl')
      .pipe(stylus())
      .pipe(gulp.dest('./public/'));
});

// // 语法检查
// gulp.task('jshint', function() {
//   gulp.src('./js/*.js')
//   .pipe(jshint())
//   .pipe(jshint.reporter('default'));
// });

// 监视文件的变化
gulp.task('watch', ['coffee', 'stylus'], function(){
  gulp.watch('./src/script/*.coffee', ['coffee'])
  gulp.watch('./src/style/*.styl', ['stylus'])
});

// 默认任务
gulp.task('default', ['coffee', 'stylus', 'watch']);
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-03-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2. gulp + browserify
  • 1.
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档