利用gulp處理簡單的前端問題

利用gulp處理js和less或者sass或者css

-gulpfile.js

-package.json

-/images

-/src

--/less

--/js

--*.html

//-node_modules//安裝包依賴之後自動生成的

//--/web//編譯後的檔案放到這裡

在git bash中cd到專案目錄，然後

npm install

}

var gulp = require('gulp'),

minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
less = require('gulp-less'),
gclean = require('gulp-clean'),
template = require('gulp-template');
var data = ;//資源路徑，一會會用template 來替換
gulp.task('clean', function() )
.pipe(gclean());
});gulp.task('minifycss', function() );
gulp.task('minifyjs', function() ))   //rename壓縮後的檔名
.pipe(uglify())    //壓縮
.pipe(gulp.dest('web/js'));  //輸出
});gulp.task('watch', function() );
gulp.task('temp', function () );
gulp.task('default', ['clean'], function());

可以使用gulp的外掛程式來壓縮，但是個人覺得還是用其他方法比較好，所以我把images放到了原始碼外

推薦兩個壓縮的**tinypng

智圖壓縮在上線之前做就可以了

還可以在這個流程中加入es6的編譯，需要兩個庫

還可以自動新增css字首

等等現在webpack很火，不過，對於簡單的專案來說gulp更適合

我們的主頁

使用gulp遇到的問題

gup3 vs gulp4 區別 gulp 4最大的變化就是不能像gulp3一樣傳遞乙個依賴任務列表。gulp3，如果有乙個任務a，b和c的列表，你想在乙個序列中執行 確保a在b開始之前完成，而b在c開始之前完成 如下 gulp.task a function gulp.task b a funct...

前端定位問題的簡單簡述

最近開始學前端 遇到個定位問題花了我很長時間才搞懂.有些小夥伴可能也和我一樣不知道啥時用相對定位啥時用絕對定位.嘿嘿，可能就我不知道 沒關係我用我的理解簡述下下 前提要知道什麼是文件流 文件流是文件中可顯示物件在排列時所占用的位置。知道文件流之後再去想定位問題 相對定位 relative 就是相對於...

前端各種居中問題處理

前言兩年前工作時開的部落格，一年前寫了兩篇博文，然後就到了現在才重拾起筆。原因有二，一是自覺技術不足，二曰懶。最近由於在專案中遇到需求為拖動列可調整列順序的 最後找到一款基於jquery名為datatables的外掛程式，但網上為之寫使用方法的很少，質量也很差，所以就動了為之寫乙個較為全面的使用方法...