gulp配置文件

最新推荐文章于 2022-07-01 22:16:49 发布
原创 最新推荐文章于 2022-07-01 22:16:49 发布 · 542 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档主要介绍如何配置和使用gulp，通过示例展示`package.json`和`gulpfile.js`的内容，来实现项目的自动化构建流程。

package.json:

{
  "name": "og-web20171010",
  "version": "1.0.0",
  "description": "20171010",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tangcc",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browsersync-ssi": "^0.2.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.9.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-copy": "^1.0.1",
    "gulp-filter": "^5.0.1",
    "gulp-minify": "^1.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rev": "^8.0.0",
    "gulp-rev-collector": "^1.2.2",
    "gulp-run-sequence": "^0.3.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^3.0.0",
    "gulp-zip": "^4.0.0"
  }
}

gulpfile.js:

//使用严格模式的js。保证js的严谨，作为一个好习惯。
'use strict';
var appDir = './app';//源码目录
//var destDir = 'D:\\og_web-html\\src\\main\\webapp';//编译后目录
var destDir = "D:\\oghtml";//编译后目录

//var destDir = './dist';//编译后目录

var gulp = require("gulp"),
sourcemaps = require('gulp-sourcemaps');//映射文件

//多浏览器多设备同步&自动刷新
var browserSync = require("browser-sync").create(),
  SSI  =  require('browsersync-ssi'),
  filter  =  require('gulp-filter'),
  //用来编译sass
  sass  =  require('gulp-sass'),
  cssAutoprefixer = require('gulp-autoprefixer'),
  cleanCSS = require('gulp-clean-css'),//压缩css
  rev = require("gulp-rev"),
  revCollector=require('gulp-rev-collector'),
  // 需要ruby 不用了 compass = require('gulp-compass'),
  //合并文件
  concat = require('gulp-concat'),

  //混淆js压缩
  uglify = require('gulp-uglify'),
  //压缩js
  minify = require('gulp-minify'),

  //错误处理插件plumber
  plumber = require('gulp-plumber'),
  //clean 用来删除文件
  clean = require('gulp-clean'),
  //压缩文件
  zip = require('gulp-zip'),
  filesCopy = require("gulp-copy"), //可以把固定的文件复制到目标文件夹中去
  runSequence = require('gulp-run-sequence');

////////////////////////////////////////////////// server /////////////////////////////////////////////////////////////////////
//创建一个名为serve的任务，该任务的内容就是匿名函数中的内容。
gulp.task('serve', function() {


  browserSync.init({
    //files:['**'],
    //port:8080, // 指定访问服务器的端口号
    server: {
      baseDir:destDir
      // middleware:SSI({
      //   baseDir:destDir,// 设置静态服务器的根目录
      //   ext:'.shtml',
      //   version:'1.0',
      //   //index:'index.html' // 指定默认打开的文件
      // })
    }
  });

  //监听各个目录的文件，如果有变动则执行相应的任务操作文件
  gulp.watch("app/sass/**/*.scss", ['sass']);
  gulp.watch("app/js/**/*.js", ['js']);
  gulp.watch("app/css/**/*.css", ['css']);
  gulp.watch("app/lib/**/**.**", ['lib']);
  gulp.watch("app/iframe/**/*.html", ['iframe']);
  gulp.watch("app/img/**.**", ['img']);
  gulp.watch("app/html/**/*.html", ['html']);
  gulp.watch("app/index.html", ['index']);
  //如果有任何文件变动，自动刷新浏览器
  gulp.watch("app/**/*.html").on("change",browserSync.reload);
});

//监听各个目录的文件，如果有变动则执行相应的任务操作文件
gulp.watch("app/sass/**/*.scss", ['sass']);
gulp.watch("app/js/**/*.js", ['js']);
gulp.watch("app/css/**/*.css", ['css']);
gulp.watch("app/iframe/**/*.html", ['iframe']);
gulp.watch("app/img/**.**", ['img']);
gulp.watch("app/html/**/*.html", ['html']);
gulp.watch("app/index.html", ['index']);
gulp.watch("app/lib/**/**.**", ['lib']);
//如果有任何文件变动，自动刷新浏览器
gulp.watch("app/**/*.html").on("change",browserSync.reload);


// 代理的形式 proxy
// gulp.task('serve', function() {
//   //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）
//   browserSync.init({
//     proxy: "127.0.0.1:8080"
//   });
//   //监听各个目录的文件，如果有变动则执行相应的任务操作文件
//   gulp.watch("app/sass/**/*.scss", ['sass']);
//   gulp.watch("app/js/**/*.js", ['js']);
//   gulp.watch("app/css/**/*.css", ['css']);
//   gulp.watch("app/iframe/**/*.html", ['iframe']);
//   gulp.watch("app/img/**.**", ['img']);
//   gulp.watch("app/html/**/*.html", ['html']);
//   gulp.watch("app/index.html", ['index']);
//   gulp.watch("app/lib/**/**.**", ['lib']);
//   //如果有任何文件变动，自动刷新浏览器
//   gulp.watch("app/**/*.html").on("change",browserSync.reload);
// });


//下面来分别看看处理各个部分的任务：

//compass任务，将scss编译为css
gulp.task('sass', function() {
  //首先取得app/sass下的所有后缀为.scss的文件（**/的意思是包含所有子文件夹）
  return gulp.src('app/sass/**/*.scss')
    .pipe(sass({
      //设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试
      sourcemap: 'true',
      //输出格式设置为compressed就不需要压缩css了
      style: 'compressed',
      //文件目录
      css: 'app/css',
      sass: 'app/sass',
      image: 'app/img'
    }))
    //如果有错误输出错误提示
    .on('error', function(error) {
      // Would like to catch the error here
      console.log(error);
      this.emit('end');
    })
    .pipe(gulp.dest('app/css'))
    //自动刷新浏览器
    .pipe(browserSync.stream());
});

//css
gulp.task('css', function() {
  return gulp.src(["app/css/**/*.css"])
    .pipe(plumber())
    .pipe(gulp.dest(destDir+"/css"))
    .pipe(browserSync.stream());
});

//js任务，将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task('js', function(){
  //首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）
  return gulp.src('app/js/**/*.js')
  //错误管理模块
    .pipe(plumber())
    //.pipe(uglify())
    //js压缩
    //.pipe(minify())
    .pipe(gulp.dest(destDir+"/js"))
    //自动刷新浏览器
    .pipe(browserSync.stream());
});


//html任务
gulp.task('html', function() {
  return gulp.src(["app/html/**/*.html"])
    .pipe(plumber())
    .pipe(gulp.dest(destDir + "/html"))
    .pipe(browserSync.stream());
});

//index.html任务
gulp.task('index', function() {
  return gulp.src(["app/index.html"])
    .pipe(plumber())
    .pipe(gulp.dest(destDir + "/"))
    .pipe(browserSync.stream());
});
//copy iframe任务
gulp.task('iframe', function() {
  return gulp.src("app/iframe/**/*.html")
    .pipe(plumber())
    .pipe(gulp.dest(destDir + "/iframe"))
    .pipe(browserSync.stream());
});
//copy img
gulp.task('img', function() {
  return gulp.src("app/img/**/*.*")
    .pipe(plumber())
    .pipe(gulp.dest(destDir + "/img"))
    .pipe(browserSync.stream());
});
//copy lib
gulp.task('lib', function() {
  return gulp.src("app/lib/**/*.*")
    .pipe(plumber())
    .pipe(gulp.dest(destDir+"/lib"))
    .pipe(browserSync.stream());
});


//clean任务：清空dist文件夹，下边重建dist的时候使用
gulp.task('clean', function () {
  return gulp.src( [destDir + '/*','!WEB-INF/**/*.*'] ,{read: false})
    .pipe(clean({force: true}));
});

//redist任务：需要时手动执行，重建dist文件夹：首先清空，然后重新处理所有文件
gulp.task('redist',function(){
  //先运行clean，然后并行运行html,js,compass
  runSequence('clean',['html','js','iframe','img','lib','index','css']);
});

//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候，就会
gulp.task('default', function(){
  //先运行redist，再启动服务器
  runSequence('redist','serve');
});


////////////////////////////////////////////////// publish ///////////////////////////////////////////////////////////////////
////////////////////////////////////////////////// publish ///////////////////////////////////////////////////////////////////


//创建一个名为publish serve的任务，该任务的内容就是匿名函数中的内容。
gulp.task('serve-release', function() {
  //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）
  browserSync.init({
    //files:['**'],
    //port:"8080", // 指定访问服务器的端口号
    server: {
      baseDir:destDir
      // middleware:SSI({
      //   baseDir:destDir,// 设置静态服务器的根目录
      //   ext:'.shtml',
      //   version:'1.0',
      //   //index:'index.html' // 指定默认打开的文件
      // })
    }
  });

  //监听各个目录的文件，如果有变动则执行相应的任务操作文件
  gulp.watch("app/sass/**/*.scss", ['sass-release']);
  gulp.watch("app/lib/**/**.**", ['lib-release']);
  gulp.watch("app/css/**/*.css", ['css-release']);
  gulp.watch("app/js/**/*.js", ['js-release']);
  gulp.watch("app/img/**.**", ['img-release']);
  gulp.watch("app/html/**/*.html", ['html-collector-release']);
  gulp.watch("app/iframe/**/*.html", ['iframe-collector-release']);
  gulp.watch("app/index.html", ['index-collector-release']);
  //如果有任何文件变动，自动刷新浏览器
  gulp.watch("app/**/*.html").on("change",browserSync.reload);
});

// 代理的形式 proxy
// gulp.task('serve', function() {
//   //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）
//   browserSync.init({
//     proxy: "127.0.0.1:8080"
//   });
//   //监听各个目录的文件，如果有变动则执行相应的任务操作文件
      //各种watch略
// });

//下面来分别看看处理各个部分的任务：
//compass任务，将scss编译为css
gulp.task('sass-release', function() {
  //首先取得app/sass下的所有后缀为.scss的文件（**/的意思是包含所有子文件夹）
  return gulp.src('app/sass/**/*.scss')
    .pipe(sass({
      //设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试
      sourcemap: 'true',
      //输出格式设置为compressed就不需要压缩css了
      style: 'compressed',
      //文件目录
      css: 'app/css',
      sass: 'app/sass',
      image: 'app/img'
    }))
    //如果有错误输出错误提示
    .on('error', function(error) {
      // Would like to catch the error here
      console.log(error);
      this.emit('end');
    })
    .pipe(gulp.dest('app/css'))
    //自动刷新浏览器
    .pipe(browserSync.stream());
});

//css-release
gulp.task('css-release', function() {
  return gulp.src(["app/css/**/*.css"])
    .pipe(plumber())
    .pipe(cssAutoprefixer())
    .pipe(cleanCSS())
    .pipe(rev())
    .pipe(gulp.dest(destDir + "/css"))
    .pipe(rev.manifest())
    .pipe(gulp.dest(appDir + '/revCssJson'));
});

//jsRev-release任务，将jsRev-release压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task('js-release', function(){
  //首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）
  return gulp.src(['app/js/**/*.js'])
  //错误管理模块
    .pipe(plumber())
    .pipe(uglify())
    //js压缩
    .pipe(minify())
    .pipe(rev())
    .pipe(gulp.dest(destDir+"/js"))
    .pipe(rev.manifest())
    .pipe(gulp.dest(appDir + '/jsRevJson'));
});

gulp.task('img-release',function(){
  gulp.src([appDir + '/img/*'])
    .pipe(plumber())
    .pipe(rev())
    .pipe(gulp.dest(destDir + '/img'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(appDir + '/imgRevJson'));
});

gulp.task('html-collector-release',function(){
  gulp.src([appDir + '/jsRevJson/*',appDir + '/revCssJson/*',appDir + '/imgRevJson/*',appDir+'/html/**/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest(destDir + '/html'));
})

gulp.task('iframe-collector-release',function(){
  gulp.src([appDir + '/jsRevJson/*',appDir + '/revCssJson/*',appDir + '/imgRevJson/*',appDir+'/iframe/**/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest(destDir + '/iframe'));
})

gulp.task('index-collector-release',function(){
  gulp.src([appDir + '/jsRevJson/*',appDir + '/revCssJson/*',appDir + '/imgRevJson/*',appDir + '/index.html'])
    .pipe(revCollector())
    .pipe(gulp.dest(destDir + '/'));
})

//copy lib
gulp.task('lib-release', function() {
  return gulp.src("app/lib/**/*.*")
    .pipe(plumber())
    .pipe(gulp.dest(destDir+"/lib"))
    .pipe(browserSync.stream());
});

//clean任务：清空dist文件夹，下边重建dist的时候使用
gulp.task('clean-release', function () {
  return gulp.src( [destDir + '/*','!WEB-INF/**/*.*'] ,{read: false})
    .pipe(clean({force: true}));
});

//redist任务：需要时手动执行，重建dist文件夹：首先清空，然后重新处理所有文件
gulp.task('redist-release',function(){
  //先运行clean，然后并行运行html,js,compass
  runSequence('clean-release',['sass-release','lib-release','css-release','js-release','img-release','html-collector-release','iframe-collector-release','index-collector-release']);
});

//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候，就会
gulp.task('default-release', function(){
  //先运行redist，再启动服务器
  runSequence('redist-release','serve-release');
});


gulp项目配置文件
05-31
gulp文件项目配置，生产配置，开发配置，打包，发布。
gulp-config-101:演示-gulp配置文件
05-13
gulp-config-101 演示-将特定于项目的配置保留在gulpfile.js这样我们就可以在任务相似的项目之间共享gulpfile.js 。 $ npm install $ bower install $ gulp
一份gulp的配置文件
梦空间
12-12 2340
参考： 优先参考：Getting started with gulp Gulp安装及配合组件构建前端开发一体化 用gulp-livereload实现浏览器自动刷新页面 gulpfile.js如下： /** * Created by admin on 2016/12/3. */ /** * 组件安装 * 参考： * http://www.dbpoo.com/
使用gulp 怎样配置文件
mlonly的博客
01-20 6579
引入模块 gulp var gulp = require(‘gulp’); 创建执行目录 需要进行监听的文件 以及目录 //gulp.task(“html”,async()=>{ // gulp.src(“html/**/*”)//文件目录 // .pipe(gulp.dest(“D:\phpStudy\PHPTutorial\WWW\floweritem\html”));。/...
gulp的配置文件
波~的博客
02-23 174
const gulp = require('gulp'); const less = require('gulp-less'); const rename = require('gulp-rename'); const autoprefixer = require('gulp-autoprefixer'); const connect = require('gulp-connect'); con...
写一份gulp常用配置文件，构建前端工作流
热门推荐
梦空间
01-09 1万+
目录目录 前言 创建项目 初始化项目 创建目录结构 编写Gulp配置 创建gulp的config文件 创建gulp的dev文件 创建gulp的prod文件 调用dev和prod方法 运行gulp 定义脚本scripts 附录前言　　上回写了一篇关于《一份gulp的配置文件》的文章。其中已经提及了简单项目中gulp的配置。 　　在使用实践的过程中，发现这样的一份配置并不太“友好”，没有区分开发环境和
深入解析gulp配置文件修改教程
当我们对项目的gulp配置文件进行修改后，如果需要将这些修改共享给团队的其他成员，或者上传到远程仓库供其他人下载使用时，通常会将修改后的node_modules文件夹打包成zip格式进行分发。 在本例中，标题提到的"gulp...
gulp配置文件演示：项目间共享gulpfile的配置管理
gulp-config-101 是一个用于演示如何在 Gulp 构建系统中实现配置文件分离的示例项目，其核心目标是将特定于项目的配置信息从 `gulpfile.js` 中抽离出来，从而提升构建脚本的可复用性和可维护性。该项目通过模块化的...
gulp解决跨域的配置文件问题
08-30
gulp解决跨域的配置文件问题 在开发Web应用程序时，我们经常遇到跨域资源共享的问题。跨域资源共享是一种机制，允许Web页面从不同的源获取资源，如图片、样式表、脚本等。然而，默认情况下，Web浏览器会阻止跨域...
gulp配置
weixin_45712583的博客
07-01 469
总结gulp的配置
gulp常用配置文件，构建前端工作流
qq_39748755的博客
05-24 233
gulpfile.js文件 引入gulpfile.dev.js和gulpfile.prod.js文件，并调用dev和prod方法，这样对应环境下的各个任务即被创建出来了。 var prod = require('./build/gulpfile.prod.js'); var dev = require('./build/gulpfile.dev.js'); prod(); dev(); //...
gulp打包的配置文件
wangsiyisiyi的博客
05-14 197
const {src,dest,parallel,series,watch}=require('gulp') const loadPlugins=require('gulp-load-plugins') const plugin=loadPlugins()//实现自动下载依赖 // const plugin.sass=require('gulp-sass') // //js转换还要下这两个依赖@babel/core @babel/preset-env // const plugin.bebel=requi
Gulp 使用
qt的博客
12-15 172
Gulp 基本使用 gulp ：高效，易用，在项目中先安装项目依赖，导出相关函数方式 yarn init --yes yarn add gulp --dev code gulpfile.js // gulp的入口文件,默认开启异步任务 exports.foo = done =>{ console.log('foo start') done(); // 标识任务完成 } exports.default = done =>{ // 默认任务 console.log('de
gulp配置文件gulpfile.js
啊哈前端的专栏
12-09 3683
/** * * 使用到的插件： * gulp-watch * */ var gulp = require("gulp"), less = require("gulp-less"), //编译less browserSync = require("browser-sync"), //同步刷新，测试工具 changed = require("gulp-cha
完整的Gulp安装及文件配置
black2Girl的博客
11-12 703
  什么是Gulp？     gulp.js是基于流的自动化构建工具。 前置知识需求： node.js的一些基础用法 npm的基础用法，如init、install、run等 了解gulp.js的Api（内容很少，掌握五个Api就可以了） 安装gulp的步骤流程：     1、新建项目文件夹（例如D盘下新建hbPage文件夹），启用cmd     2、进入项目文件，全局安装Gulp      ...
#学习笔记#gulp配置文件入门
Pluto
09-12 521
教程推荐：http://www.gulpjs.com.cn/docs/getting-started/ package.json{ "name": "gulptest", "version": "1.0.0", "description": "", "main": "gulpfile.js", "dependencies": { "gulp": "^3.9.1",
gulp的核心文件配置思路（一）
wQinHuLu的博客
07-14 273
gulpfile.js的配置思路（一） 我们都知道，gulp是一个构建工具，说的直白一点就是帮助我们整理代码，整理成我们想要的样子并且能顺利解析编译执行。那接下来我就记录一下我配置这个核心文件gulpfile.js的整体思路。 开始动手之前的必要操作： 1、首先前端必备的node，npm与node环境配置（这个没有安装的就去node官网下载安装） 2、安装全局的gulp命令行工具npm install -g gulp-cli 3、创建一个新的目录 npx mkdirp new-gulp 4、进入至这个目录
gulp的核心文件配置思路(二）
wQinHuLu的博客
07-15 178
gulp的核心文件配置思路(二） 上一篇博客我们已经完成了文件的整理，但是gulp作为一个构建工具，能够做到的远远不止整理目录这么简单。它之所以强大，在于它能够使用插件。 gulp插件 打开gulp官网，点击选择插件，到目前为止node提供有4000多个包可以供gulp这个构建工具使用，所以我们用gulp能实现的东西，远远不止这些。梳理几个我们在编写项目时常用的插件： 一样的思路，三大天王：html,css,js 静态资源：图片 html我们可能需要对其进行压缩 css我们在编写项目时，会用到 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值