国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

gulp 入門配置

AlienZHOU / 2733人閱讀

摘要：使用進行本地開發自動刷新，配合對和進行壓縮處理，最終打包到目錄安裝以及其他插件代碼示例安裝依賴本地安裝所用到的地方同步執行任務獲取組件是否開啟瀏覽器提示端口監聽目錄下所有文件清楚目錄下所有文件定

使用 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84751.html

相關文章

  • Glup快速入門整理

    摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹 中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器 能自動化...

    HmyBmny 評論0 收藏0

  • Glup快速入門整理

    摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹 中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器 能自動化...

    jhhfft 評論0 收藏0

  • Glup快速入門整理

    摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹 中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器 能自動化...

    ysl_unh 評論0 收藏0

  • gulp和webpack入門介紹

    摘要：介紹說明的包管理器，用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執行插件名稱?？偨Y安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運行任務。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言 眾所周知目前比較火的工具就是gulp和webpack，但webpack和gulp卻有所不同，本...

    hsluoyz 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<