資訊專欄INFORMATION COLUMN
摘要：需求分析我有等的壓縮需求，能滿足是構(gòu)建自動(dòng)化的工具，對(duì)業(yè)務(wù)的處理依托第三方插件來(lái)完成官方導(dǎo)讀前提運(yùn)行環(huán)境安裝時(shí)并配置了是的包管理工具，就能下載相應(yīng)模塊類似于的框架的也是下載依賴的好手步驟下載配置調(diào)用執(zhí)行實(shí)踐的是中已下載的模塊直接使用模塊名
[需求分析]
我有JS/Css/html等的壓縮需求，gulp能滿足
gulp是構(gòu)建自動(dòng)化的工具，對(duì)業(yè)務(wù)的處理,依托第三方插件來(lái)完成
官方導(dǎo)讀 http://www.gulpjs.com.cn/docs...
[前提]
node.js運(yùn)行環(huán)境安裝時(shí)并配置了npm
npm是node.js的包管理工具，npm install 就能下載相應(yīng)模塊
類似于php的laravel框架的composer require,也是下載依賴的好手
[步驟]
gulp下載
gulpfile.js配置
gulp
[實(shí)踐]
var gulp = require("gulp"), //require的是node_modules中已下載的模塊,直接使用模塊名
cssmin = require("gulp-cssmin"), //譬如你要處理css壓縮，那么你得確保已經(jīng)npm install gulp-cssmin.這樣才能require
jsmin = require("gulp-uglify");
/*gulp分配任務(wù)給指定的插件，由該插件輸入輸出式處理*/
//Css壓縮
gulp.task("cssmin",function () { //cssmin是gulp調(diào)用執(zhí)行時(shí)的任務(wù)名,隨意
/*白話文:把什么樣的文件，輸出給哪個(gè)插件處理，結(jié)果再輸出到哪里*/
gulp.src("./public/mobile/css/*.css")
.pipe(cssmin())
.pipe(gulp.dest("./release/css"));
});
//JS壓縮
gulp.task("jsmin",function () {
gulp.src("./public/mobile/js/*.js")
.pipe(jsmin())
.pipe(gulp.dest("./release/js"));
});
[調(diào)用]
[gulp常用插件整理]
gulp-less 編譯LESS文件 gulp-autoprefixer 添加CSS私有前綴 gulp-cssmin 壓縮CSS gulp-rname 重命名 gulp-imagemin 圖片壓縮 gulp-uglify 壓縮JS gulp-concat 合并 gulp-htmlmin 壓縮HTML
插件寶庫(kù)在此
https://gulpjs.com/plugins/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91839.html
摘要：在資源很多時(shí)，例如圖片的復(fù)制，這個(gè)會(huì)加快任務(wù)的執(zhí)行速度，特別是需要實(shí)時(shí)預(yù)覽時(shí)，減少延遲。但是作為個(gè)入門短時(shí)間內(nèi)還是不能夠被取代得了的。 gulp常用功能集合（開(kāi)發(fā)和生產(chǎn)分離、靜態(tài)資源壓縮優(yōu)化、代碼優(yōu)化、實(shí)時(shí)預(yù)覽、hash） tags: gulp 前端自動(dòng)化開(kāi)發(fā) npm倉(cāng)庫(kù)下載地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基礎(chǔ)上的...
摘要：是通過(guò)加載器和插件對(duì)資源進(jìn)行處理的。另外我們知道是對(duì)整個(gè)過(guò)程進(jìn)行控制，所以在其配置文件中配置的每一個(gè)對(duì)項(xiàng)目中該配置路徑下所有的資源都可以管理。 一 概念介紹 gulp 是 task runner，Webpack 是 module bundler。可以這么說(shuō)， Webpack 和 gulp 本身都有 95% 的功能是不能被對(duì)方替代，或者直接說(shuō)和對(duì)方不重疊的。 1 什么是gulp Gulp...
摘要：生成的文件如下由于給文件添加了哈希值，所以每次編譯出來(lái)的和都是不一樣的，這會(huì)導(dǎo)致有很多冗余文件，所以我們可以每次在生成文件之前，先將原來(lái)的文件全部清空。中也有做這個(gè)工作的插件，因此我們可以在編譯壓縮添加哈希值之前先將原文將清空。 原文鏈接：http://mrzhang123.github.io/2016/09/07/gulpUse/項(xiàng)目鏈接：https://github.com/MrZ...
摘要：以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下，第一次寫(xiě)博客，有寫(xiě)錯(cuò)的請(qǐng)多多見(jiàn)諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請(qǐng)指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái)，而不只是一個(gè)打包工具。 以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下，第一次寫(xiě)博客，有寫(xiě)錯(cuò)的請(qǐng)多多見(jiàn)諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請(qǐng)指出。 如今，網(wǎng)頁(yè)不再...
閱讀 1217·2021-09-30 09:47
閱讀 3769·2021-09-06 15:02
閱讀 1781·2021-09-01 10:46
閱讀 2365·2019-08-30 15:52
閱讀 601·2019-08-29 15:28
閱讀 1875·2019-08-29 15:08
閱讀 1155·2019-08-29 13:28
閱讀 2580·2019-08-29 12:19
