Gulp腳本

incredible 發布于2019-08-26 12:01 / 2402人閱讀

摘要：插件自動同步瀏覽器插件合并文件的插件壓縮插件壓縮插件壓縮圖片插件壓縮圖片的插件緩存插件，可以加快編譯速度刪除文件插件同步運行任務插件給屬性添加瀏覽器前綴插件插件合成圖片插件編譯文件，添加屬性瀏覽器前綴，瀏覽器自動更

var gulp = require("gulp");
// sass 插件

var sass = require("gulp-sass");

// 自動同步瀏覽器插件

var browserSync = require("browser-sync");

// 合并文件的插件

var useref = require("gulp-useref");

// 壓縮js插件

var uglify = require("gulp-uglify");
var gulpIf = require("gulp-if");

// 壓縮css插件

var cssnano = require("gulp-cssnano");

// 壓縮圖片插件

var imagemin = require("gulp-imagemin");

// 壓縮png圖片的插件

var pngquant = require("imagemin-pngquant");

// 緩存插件，可以加快編譯速度

var cache = require("gulp-cache");

// 刪除文件插件

var del = require("del");

// 同步運行任務插件

var runSequence = require("run-sequence");

// 給css3屬性添加瀏覽器前綴插件

var autoprefixer = require("gulp-autoprefixer");
// sourcemap 插件
var sourcemaps = require("gulp-sourcemaps");
var lazypipe = require("lazypipe");

// 合成sprite圖片插件

var spritesmith = require("gulp.spritesmith");
var imageminOptipng = require("imagemin-optipng");

// 編譯sass文件，添加css3屬性瀏覽器前綴，reload 瀏覽器

gulp.task("sass", function () {
 return gulp.src("./src/scss/**/*.scss")
     .pipe(sass())
     .pipe(autoprefixer())
     .pipe(gulp.dest("./src/css"))
     .pipe(browserSync.reload({stream: true}));
});

// 自動更新瀏覽器任務

gulp.task("browserSync", function () {
 browserSync.init({
     server: {
         baseDir: "src"
     }
 })
});

// 合并文件任務
// 在html設置需要合并的文件：
//
//
//
//
// 執行任務后，會編譯成：
// 同時會把 flexible_css.js 和 flexible.js 合并成 flexible.min.js

gulp.task("useref", function () {
 return gulp.src("./src/*.html")
     .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true })))
     .pipe(gulpIf("*.js", uglify()))
     .pipe(gulpIf("*.css", cssnano()))
     .pipe(sourcemaps.write("maps"))
     .pipe(gulp.dest("dist"));
});

// 圖片壓縮任務

gulp.task("images", function () {
 return gulp.src("./src/img/**/*.+(png|jpg|gif|svg)")
     .pipe(imagemin({
         progressive: true,
         svgoPlugins: [{removeViewBox: false}],
         use: [pngquant()]
     }))
     .pipe(gulp.dest("dist/img"));
});

// 合并sprite圖任務

gulp.task("sprite", function () {
 var spriteData = gulp.src("./src/img/sprite/**/*.png")
     .pipe(spritesmith({
         imgName: "sprite.png",
         cssName: "sprite.scss",
         imgPath: "../img/sprite/sprite.png",
         cssFormat: "scss",
         padding: 10
     }));
 return spriteData.pipe(gulp.dest("./src/img/sprite/"))
});

// 刪除build目錄

gulp.task("clean:dist", function () {
 return del.sync("dist");
});

// 清除緩存

gulp.task("cache:clear", function (cb) {
 return cache.clearAll(cb)
});

// 監控任務，當有sass文件，html文件，js文件改動的時候，刷新瀏覽器

gulp.task("watch", ["browserSync", "sass"], function () {
 gulp.watch("./src/scss/**/*.scss", ["sass"]);
 gulp.watch("./src/*.html", browserSync.reload);
 gulp.watch("./src/js/**/*.js", browserSync.reload);
});

// 構建最終輸出文件

gulp.task("build", function (callback) {
 runSequence("clean:dist", ["sass", "useref", "images", "fonts"], callback);
});

// gulp 默認執行任務

gulp.task("default", function (callback) {
 runSequence(["sass", "browserSync", "watch"], callback);
});

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

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

前端開發中提到的“腳手架”到底指什么，CLI？gulp 和 gulp-cli有什么區別

摘要：一般來說，腳手架是幫你減少為減少重復性工作而做的重復性工作的工具和的區別可以看這個它跟前端常說的腳手架不是一個東西只是的縮寫舉個例子你要寫一個項目，源語言為，用了后端是你每次完成一部分功能，你都要用把編譯到編譯壓縮文件每次修改代碼都要一般來說，腳手架是幫你減少「為減少重復性工作而做的重復性工作」的工具. gulp和gulp-cli的區別可以看這個task - what does gu...

shadajin 2019-08-23 12:20 評論0 收藏0
“流式”前端構建工具——gulp.js 簡介

摘要：流式構建改變了底層的流程控制，大大提高了構建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關于流式構建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實是至關重要的。 Grunt 一直是前端領域構建工具（任務運行器或許更準確一些，因為前端構建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 評論0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出現了，它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具，，，，以發布時間為順序。它定位是模塊打包器，而屬于構建工具。而且在其他的打包工具在處理非網頁文件比如等基本還是需要借助它來實現。本文當時寫在本地，發現換電腦很不是方便，在這里記錄下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以錦上添花，不使用也沒關系...

Sleepy 2019-08-23 18:03 評論0 收藏0
用 Electron 打造 Win/Mac 應用，從「代碼」到可下載的「安裝包」，可能比你想得麻煩一

摘要：三配置環節目的一是為之后的環節初始化工作流參數，二是準備好應用文件夾內容即要打包的目標文件夾做的事解析命令行參數，初始化工作參數，填充配置文件，把配置文件和相關依賴文件導入到文件夾內合適的首發于酷家樂前端博客，作者@摘星（segmentfault @StinsonZhao）我們能從很多地方學習到怎么起一個 Electron 項目，有些還會介紹怎么打包或構建你的代碼，但距離「真正地...

LdhAndroid 2019-08-21 17:30 評論0 收藏0
【譯】使用 AngularJS 和 Electron 構建桌面應用

摘要：原文的框架以前叫做允許你使用和編寫跨平臺的桌面應用。這個教程向我們展示了如何使用和構建一個桌面應用。我們的應用看起來會是這個樣子配置開發環境是微軟的一款跨平臺代碼編輯器。是基于和微軟自身的開發的。我們需要用我們最終構建的應用來替換它。原文：Creating Desktop Applications With AngularJS and GitHub Electron showImg(...

maxmin 2019-08-22 10:59 評論0 收藏0