使用gulp構建專案

專案目錄如下：

|--test

|--src
|--lib 
|--jquery.min.js
|--component
|--button.js
|--selector.js
|--less
|--button.less
|--selector.less
|--dist
|--gulpfile.js
|--package.json
|--package-lock.json

const

=require
('gulp');
const glob =
require
('glob');
const clean =
require
('gulp-clean');
const uglify =
require
('gulp-uglify');
const babel =
require
('gulp-babel');
const concat =
require
('gulp-concat');
const less =
require
('gulp-less');
const autoprefixer =
require
('gulp-autoprefixer');
const minifycss =
require
('gulp-clean-css');
const gulpif =
require
('gulp-if');
const connect =
require
('gulp-connect');
const ar** =
require
('yargs').
options
('env',)
.ar**;
const destdir =
'dist'
;const
dev=
(ar**.e ===
'development'
&&true)||
false
;let libarray =
['./src/lib/jquery.min.js'];
let jsarray =
['./src/component/*.js'];
let lessarray =
['./src/less/*.less'];
//js檔案編譯壓縮打包
task
('minjs',(
)=>);
//less檔案合併相容性處理及壓縮
task
('mincss',(
)=>);
//第三方庫原樣輸出
task
('outputlib',(
)=>).
pipe
(dest
(destdir));
});/
/清空打包目錄
task
('clean',(
)=>);
//配置前端服務
task
('webserver',(
)=>);
});/
/實時監聽js,less
const
watcher=(
)=>
;task
('dev'
,series
('clean'
,parallel
('minjs'
,'mincss'),
parallel
(watcher,
'webserver'))
);

,"devdependencies":,
"scripts":,
"author":""
,"license"
:"isc"
}

gulp構建專案

1.建立project資料夾，手動初始化專案，使用npm管理工具 npm init yes2.根據package.json中的依賴包來進行專案的開發 cnpm install 此處使用的是 映象 安裝所有的依賴包3.首先確保你全域性安裝了gulp,當然專案中也安裝了gulp gulp init 此處...

gulp專案構建小結

告別了jquery，現在想分享下我們專案構建所使用的技術。1 es6 2 browserify 3 babelify 4 gulp 5 concat 6 browser sync 1 使用es6的模組管理 同時可以使用es6的語法糖了！2 使用browserify進行模組打包 3 babelify結...

Gulp 自動化構建

use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以...