摘要:下載打包插件引入引入的插件是個(gè)方法,必須記住調(diào)用。神來(lái)之筆其他的插件不用再引入了使用方法所有的插件用引出,其他插件的方法名統(tǒng)一為插件的功能名字即插件名字的最后一部分如將轉(zhuǎn)換為將轉(zhuǎn)換為的文件輸出到下實(shí)時(shí)刷新
Gulp介紹
中文主頁(yè): http://www.gulpjs.com.cn/
gulp是與grunt功能類似的前端項(xiàng)目構(gòu)建工具, 也是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器
能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的
合并、壓縮、檢查、監(jiān)聽文件變化、瀏覽器自動(dòng)刷新、測(cè)試等任務(wù)
gulp更高效(異步多任務(wù)), 更易于使用, 插件高質(zhì)量
安裝 nodejs, 查看版本: node -v
創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用gulp_test
|- dist |- src |- js |- css |- less |- index.html |- gulpfile.js-----gulp配置文件 |- package.json { "name": "gulp_test", "version": "1.0.0" }
安裝gulp:
全局安裝gulp
npm install gulp -g
局部安裝gulp
npm install gulp --save-dev
配置編碼: gulpfile.js
//引入gulp模塊 var gulp = require("gulp"); //定義默認(rèn)任務(wù) gulp.task("任務(wù)名", function() { // 將你的任務(wù)的任務(wù)代碼放在這 }); gulp.task("default", ["任務(wù)"])//異步執(zhí)行
構(gòu)建命令:
gulp
使用gulp插件
相關(guān)插件:
gulp-concat : 合并文件(js/css)
gulp-uglify : 壓縮js文件
gulp-rename : 文件重命名
gulp-less : 編譯less
gulp-clean-css : 壓縮css
gulp-livereload : 實(shí)時(shí)自動(dòng)編譯刷新
重要API
gulp.src(filePath/pathArr) :
指向指定路徑的所有文件, 返回文件流對(duì)象
用于讀取文件
gulp.dest(dirPath/pathArr)
指向指定的所有文件夾
用于向文件夾中輸出文件
gulp.task(name, [deps], fn)
定義一個(gè)任務(wù)
gulp.watch()
監(jiān)視文件的變化
處理js
創(chuàng)建js文件
src/js/test1.js
(function () { function add(num1, num2) { var num3 = 0; num1 = num2 + num3; return num1 + num2; } console.log(add(10, 30)); })();
src/js/test2.js
(function () { var arr = [2,3,4].map(function (item, index) { return item+1; }); console.log(arr); })();
下載插件:
npm install gulp-concat gulp-uglify gulp-rename --save-dev
配置編碼
var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var rename = require("gulp-rename"); gulp.task("minifyjs", function() { return gulp.src("src/js/*.js") //操作的源文件 .pipe(concat("built.js")) //合并到臨時(shí)文件 .pipe(gulp.dest("dist/js")) //生成到目標(biāo)文件夾 .pipe(rename({suffix: ".min"})) //重命名 .pipe(uglify()) //壓縮 .pipe(gulp.dest("dist/js")); }); gulp.task("default", ["minifyjs"]);
頁(yè)面引入js瀏覽測(cè)試 : index.html
打包測(cè)試: gulp
處理css
創(chuàng)建less/css文件
src/css/test1.css
#div1 { width: 100px; height: 100px; background: green; }
src/css/test2.css
#div2 { width: 200px; height: 200px; background: blue; }
src/less/test3.less
@base: yellow; .index1 { color: @base; } .index2 { color: green; }
下載插件:
npm install gulp-less gulp-clean-css --save-dev
配置編碼
var less = require("gulp-less"); var cleanCSS = require("gulp-clean-css"); //less處理任務(wù) gulp.task("lessTask", function () { return gulp.src("src/less/*.less") .pipe(less()) .pipe(gulp.dest("src/css")); }) //css處理任務(wù), 指定依賴的任務(wù) gulp.task("cssTask",["lessTask"], function () { return gulp.src("src/css/*.css") .pipe(concat("built.css")) .pipe(gulp.dest("dist/css")) .pipe(rename({suffix: ".min"})) .pipe(cleanCSS({compatibility: "ie8"})) .pipe(gulp.dest("dist/css")); }); gulp.task("default", ["minifyjs", "cssTask"]);
頁(yè)面引入css瀏覽測(cè)試 : index.html
div1111111div2222222
打包測(cè)試: gulp
處理html
下載插件:
npm install gulp-htmlmin --save-dev
配置編碼
var htmlmin = require("gulp-htmlmin"); //壓縮html任務(wù) gulp.task("htmlMinify", function() { return gulp.src("index.html") .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest("dist")); }); gulp.task("default", ["minifyjs", "cssTask", "htmlMinify"]);
修改頁(yè)面引入
打包測(cè)試: gulp
自動(dòng)編譯
下載插件
npm install gulp-livereload --save-dev
配置編碼:
var livereload = require("gulp-livereload"); //所有的pipe .pipe(livereload()); gulp.task("watch", ["default"], function () { //開啟監(jiān)視 livereload.listen(); //監(jiān)視指定的文件, 并指定對(duì)應(yīng)的處理任務(wù) gulp.watch("src/js/*.js", ["minifyjs"]) gulp.watch(["src/css/*.css","src/less/*.less"], ["cssTask","lessTask"]); });
熱加載(實(shí)時(shí)加載)
下載插件:gulp-connect
1、 npm install gulp-connect --save-dev 2、 注冊(cè) 熱加載的任務(wù) server,注意依賴build任務(wù) 3、注冊(cè)熱加載的任務(wù) //配置加載的選項(xiàng) connect.server({ root : "dist/",//監(jiān)視的源目標(biāo)文件路徑 livereload : true,//是否實(shí)時(shí)刷新 port : 5000//開啟端口號(hào) }); // 自動(dòng)開啟鏈接 open("http://localhost:5000");//npm install open --save-dev // 監(jiān)視目標(biāo)文件 gulp.watch("src/js/*.js", ["js"]); gulp.watch(["src/css/*.css", "src/css/*.less"], ["cssMin", "less"]);
擴(kuò)展
打包加載gulp插件
前提:將插件下載好。
下載打包插件: gulp-load-plugins
npm install gulp-load-plugins --save-dev
引入: var $ = require("gulp-load-plugins")();!!!引入的插件是個(gè)方法,必須記住調(diào)用。
神來(lái)之筆:其他的插件不用再引入了
使用方法:
* 所有的插件用 $ 引出,其他插件的方法名統(tǒng)一為插件的功能名字(即插件名字的最后一部分):如:concat,connect,cssmin... gulp.task("less", function () { return gulp.src("src/less/*.less") .pipe($.less())//將less轉(zhuǎn)換為less .pipe(gulp.dest("src/css/"))//將轉(zhuǎn)換為less的文件輸出到src下 .pipe($.livereload())//實(shí)時(shí)刷新 .pipe($.connect.reload()) });
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51016.html
摘要:下載打包插件引入引入的插件是個(gè)方法,必須記住調(diào)用。神來(lái)之筆其他的插件不用再引入了使用方法所有的插件用引出,其他插件的方法名統(tǒng)一為插件的功能名字即插件名字的最后一部分如將轉(zhuǎn)換為將轉(zhuǎn)換為的文件輸出到下實(shí)時(shí)刷新 Gulp介紹 中文主頁(yè): http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項(xiàng)目構(gòu)建工具, 也是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器 能自動(dòng)化...
摘要:下載打包插件引入引入的插件是個(gè)方法,必須記住調(diào)用。神來(lái)之筆其他的插件不用再引入了使用方法所有的插件用引出,其他插件的方法名統(tǒng)一為插件的功能名字即插件名字的最后一部分如將轉(zhuǎn)換為將轉(zhuǎn)換為的文件輸出到下實(shí)時(shí)刷新 Gulp介紹 中文主頁(yè): http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項(xiàng)目構(gòu)建工具, 也是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器 能自動(dòng)化...
摘要:但是,我們發(fā)布之前,需要做一些持續(xù)集成和單元測(cè)試,用來(lái)保證代碼的正確性,穩(wěn)定性。 Javascript 那么流行,作為一個(gè)前端開發(fā)者,或者前端入門者,發(fā)布一個(gè)正式可用的 Javascript 模塊,對(duì)于自己來(lái)說(shuō)應(yīng)該成長(zhǎng)很大。下面就以一個(gè)簡(jiǎn)單的 Javascript 模塊 filesize.js 來(lái)介紹 github、travis-ci、npm 這些內(nèi)容的組合使用。 一、目標(biāo)概覽 本文將...
摘要:感謝使用框架本文檔涵蓋構(gòu)建應(yīng)用所需的基礎(chǔ)知識(shí)。用于數(shù)據(jù)校驗(yàn)的組件及相關(guān)文件在此目錄進(jìn)行管理。除了自定義中間件外,還是用了諸多第三方的中間件,它們是五測(cè)試我們使用組件對(duì)服務(wù)端代碼進(jìn)行測(cè)試。識(shí)別當(dāng)前導(dǎo)航從已有導(dǎo)航中刪除給定標(biāo)識(shí)的導(dǎo)航配置。 本文同步至個(gè)人博客 MEAN.js 文檔,轉(zhuǎn)載請(qǐng)注明出處。 Overview 感謝使用 MEAN.js 框架! 本文檔涵蓋構(gòu)建 MEAN 應(yīng)用所需的基礎(chǔ)...
摘要:結(jié)果會(huì)被存放到拷貝文件目錄你可以使用方法拷貝文件目錄到新路徑,所有操作都相對(duì)于項(xiàng)目根目錄版本號(hào)緩存刷新很多開發(fā)者會(huì)給編譯的前端資源添加時(shí)間戳或者唯一令牌后綴以強(qiáng)制瀏覽器加載最新版本而不是代碼的緩存副本。 環(huán)境準(zhǔn)備 1、安裝 nodejs 和 npm ?如果你使用的是 Laravel 的 Homestead 環(huán)境,可以不用安裝了,已自帶。 ?我們來(lái)查看下它們的版本: $ node -v ...
閱讀 1864·2019-08-30 15:53
閱讀 3192·2019-08-30 15:44
閱讀 2805·2019-08-26 13:31
閱讀 1949·2019-08-26 12:10
閱讀 792·2019-08-26 11:01
閱讀 2120·2019-08-23 15:32
閱讀 1584·2019-08-23 13:43
閱讀 2529·2019-08-23 11:58