gulp的安裝與使用

2024-04-27 15:07:47

字體：大中小

來源：轉載

供稿：網友

全局安裝gulp（基于node）：$ npm install --global gulp進入項目所在的文件夾，執行npm init,填寫相關參數，生成記錄配置文件信息的package.json,用于以后項目移植時使用。進入項目所在的文件夾，作為項目的開發依賴（devDependencies）再安裝一次gulp:$ npm install --save-dev gulp在項目根目錄下創建一個名為 gulpfile.js 的文件，以下為gulpfile.js 的示例程序：復制代碼var gulp = require（'gulp'）；var less=require（'gulp-less'）；var connect = require（'gulp-connect'）；gulp.task（'html', function（） { gulp.src（'./*.html'） .pCSS', function（） { gulp.src（'dist/css/*.css'） .pipe（connect.reload（））；}）；gulp.task（'compile-less',function （） { gulp.src（'less/*.less'）。pipe（less（））。pipe（gulp.dest（'dist/css'））。pipe（connect.reload（））；}）；gulp.task（'connect', function（） { connect.server（{ host:'172.16.1.212', //使用ip地址如果使用默認的localhost將會導致websocket出錯從而只能手動f5刷新 port: 8000, //端口號，可不寫，默認8000 root: './', //當前項目主目錄 livereload: true //自動刷新 }）；}）；gulp.task（'watch', function（） { gulp.watch（'less/*.less', ['compile-less']）； //監控less文件 gulp.watch（['./*.html'], ['html']）； //監控html文件 gulp.watch（['dist/css/*.css'], ['css']）； //監控css文件}）；gulp.task（'default',['connect','watch','compile-less']）；復制代碼在執行前安裝插件gulp-less、gulp-connect（參照gulp）。這里使用gulp-less編譯。less文件為。css.使用gulp-connect插件構建web服務器以及提供自動刷新功能。類似的還有很多插件可以自行查找。在控制臺輸入gulp后執行 gulpfile.js（gulp后不添加參數時默認執行default）。執行前項目的結構為：

執行后項目的結構為：

<ul class="silder_list" ><li><a href="http://weifang.changtu.com/" target="_blank">濰坊長途汽車站時刻表</a></li></ul>

上一篇：前端HR告訴你前端題每日一練

下一篇：定位