成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Gulp腳本

incredible / 2462人閱讀

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

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

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

// 自動(dòng)同步瀏覽器插件

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");

// 同步運(yùn)行任務(wù)插件

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}));
});

// 自動(dòng)更新瀏覽器任務(wù)

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

// 合并文件任務(wù)
// 在html設(shè)置需要合并的文件：
//
//
//
//
// 執(zhí)行任務(wù)后，會(huì)編譯成 ：
// 同時(shí)會(huì)把 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"));
});

// 圖片壓縮任務(wù)

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圖任務(wù)

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)
});

// 監(jiān)控任務(wù)，當(dāng)有sass文件，html文件，js文件改動(dòng)的時(shí)候，刷新瀏覽器

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);
});

// 構(gòu)建最終輸出文件

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

// gulp 默認(rèn)執(zhí)行任務(wù)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108051.html

相關(guān)文章

  • 前端開發(fā)中提到的“腳手架”到底指什么，CLI？gulp 和 gulp-cli有什么區(qū)別

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

    shadajin 評(píng)論0 收藏0

  • “流式”前端構(gòu)建工具——gulp.js 簡(jiǎn)介

    摘要：流式構(gòu)建改變了底層的流程控制，大大提高了構(gòu)建工作的效率和性能，給用戶的直觀感覺(jué)就是更快。我的看法關(guān)于流式構(gòu)建，短短幾句話無(wú)法講清它的來(lái)龍去脈，但是在的世界里，確實(shí)是至關(guān)重要的。 Grunt 一直是前端領(lǐng)域構(gòu)建工具（任務(wù)運(yùn)行器或許更準(zhǔn)確一些，因?yàn)榍岸藰?gòu)建只是此類工具的一部分用途）的王者，然而它也不是毫無(wú)缺陷的，近期風(fēng)頭正勁的 gulp.js 隱隱有取而代之的態(tài)勢(shì)。那么，究竟是什么使得 g...

    ShevaKuilin 評(píng)論0 收藏0

  • Javascript 打包工具

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

    Sleepy 評(píng)論0 收藏0

  • 用 Electron 打造 Win/Mac 應(yīng)用，從「代碼」到可下載的「安裝包」，可能比你想得麻煩一

    摘要：三配置環(huán)節(jié)目的一是為之后的環(huán)節(jié)初始化工作流參數(shù)，二是準(zhǔn)備好應(yīng)用文件夾內(nèi)容即要打包的目標(biāo)文件夾做的事解析命令行參數(shù)，初始化工作參數(shù)，填充配置文件，把配置文件和相關(guān)依賴文件導(dǎo)入到文件夾內(nèi)合適的 首發(fā)于酷家樂(lè)前端博客，作者@摘星（segmentfault @StinsonZhao） 我們能從很多地方學(xué)習(xí)到怎么起一個(gè) Electron 項(xiàng)目，有些還會(huì)介紹怎么打包或構(gòu)建你的代碼，但距離「真正地...

    LdhAndroid 評(píng)論0 收藏0

  • 【譯】使用 AngularJS 和 Electron 構(gòu)建桌面應(yīng)用

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

    maxmin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<