第三方模塊glup學習

基於node平臺開發的前端構建工具

將機械化操作編寫成任務,想要執行機械化操作執行一個命令行命令任務就能被自動執行了

用機器代替手工,提高開發效率

Gulp能做什麼呢

1、項目上線,HTML,CSS、JS文件壓縮合並
2、語法轉換(es6, less..)
3、公共文件抽離
4、修改文件瀏覽器自動刷新

Gulp使用

1、使用npm install gulp 下載gulp庫文件

2、在項目根目錄下簡歷gulpfile.js文件

3、重構項目的文件夾結構src目錄放置碼代碼文件dist目錄放置構建後文件

4、在gulpfile.js文件中編寫任務

5、在命令行工具中執行gulp任務

Gulp中提供的方法

1、gulp.src; 獲取任務要處理的文件

2、gulp.dest(); 輸出文件

3、gulp.task(); 建立gulp任務

4、gulp.watch();監控文件的變化

Gulp插件

1、gulp-htmlmin: html文件壓縮

2、gulp-csso:壓縮css

3、gulp-babel:JavaScript 語法轉換

4、gulp-less:less語法轉換

5、gulp-uglify: 壓縮混淆JavaScript

6、gulp-file-include: 公共文件包含

7、browersync: 瀏覽器實時同步

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章