gulp 入门配置

AlienZHOU 发布于2019-08-20 18:36 / 2670人阅读

摘要：使用进行本地开发自动刷新，配合对和进行压缩处理，最终打包到目录安装以及其他插件代码示例安装依赖本地安装所用到的地方同步执行任务获取组件是否开启浏览器提示端口监听目录下所有文件清楚目录下所有文件定

使用 browser-sync 进行本地开发自动刷新，配合gulp-uglify、gulp-minify-css对js和css进行压缩处理，最终打包到dist目录

安装gulp 以及其他插件

npm install gulp
npm install --save-dev ...

代码示例

安装依赖

npm install --save-dev gulp gulp-clean run-sequence browser-sync gulp-uglify gulp-minify-css

gulpfile.js

var gulp = require("gulp"), //本地安装gulp所用到的地方
  clean = require("gulp-clean"),
  runSequence = require("run-sequence"); // 同步执行任务
var browserSync = require("browser-sync");
var uglify = require("gulp-uglify"); //获取gulp-ublify组件
var minifyCSS = require("gulp-minify-css");

var reload = browserSync.reload;


gulp.task("devServer", function () {
  browserSync({
    notify: false,  // 是否开启浏览器提示
    port: 9000,    // 端口
    server: {
      baseDir: ["src"]
    }
  });
 gulp.watch("./src/*.html", reload);  //监听html目录下所有文件
});

//清楚dist目录下所有文件
gulp.task("clean", function () {
  return gulp.src("./dist/", {
    read: false
  })
    .pipe(clean());
});

//定义html任务
gulp.task("move-html", function () {
  gulp.src("./src/*.html") //找到src文件夹下的所有html
    .pipe(gulp.dest("./dist")) //压缩完成后的文件另存到dist/目录下
});

gulp.task("move-script", function () {
  gulp.src("./src/js/*.js") //找到js文件夹下的所有js
    .pipe(uglify()) //压缩文件
    .pipe(gulp.dest("dist/js")) //压缩完成后的文件另存到dist/js/目录下
});

gulp.task("move-style", function () {
  gulp.src("./src/css/*.css") //找到css文件夹下的所有css
    .pipe(minifyCSS()) //压缩文件
    .pipe(gulp.dest("dist/css")) //压缩完成后的文件另存到dist/css/目录下
});

//定义看守任务
gulp.task("watch", function () {
  // gulp.watch("public/*.html").on("change", reload);
  gulp.watch("./src/*.html", reload);  //监听html目录下所有文件
});


gulp.task("move", ["move-style", "move-script", "move-html"]);

// release

gulp.task("build", function (cb) {
  runSequence(
    "clean", // 第一步：清理目标目录
    "move", // 第二步：打包
    cb
  );
});

// dev
gulp.task("default", ["devServer"]);

本地开发

gulp default

发布

gulp build

GPU云服务器云服务器 gulp gulp4 gulp 上传cdn 入门级服务器配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84751.html

Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

HmyBmny 2019-08-20 18:12 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

jhhfft 2019-08-29 12:58 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

ysl_unh 2019-08-01 17:12 评论0 收藏0
gulp和webpack入门介绍

摘要：介绍说明的包管理器，用于插件管理包括安装卸载管理依赖等使用安装插件命令提示符执行插件名称。总结安装新建文件全局和本地安装安装插件新建文件通过命令提示符运行任务。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言众所周知目前比较火的工具就是gulp和webpack，但webpack和gulp却有所不同，本...

hsluoyz 2019-08-20 18:58 评论0 收藏0