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

文件目錄

/項目根目錄
-gulpfile.js
-package.json
-/images
-/src
--/less
--/js
--*.html

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

//--/web//編譯后的文件放到這里

安裝包依賴

在git bash中cd到項目目錄，然后

npm install

會自動安裝package.json里面寫的插件，根據自己項目所需要的插件來安裝,下面是我的項目的一些依賴

{"name": "ionic-project","version": "1.0.0","description": "An Ionic project","devDependencies": {"del": "^2.2.0","gulp": "^3.9.1","gulp-clean": "^0.3.1",//清除文件"gulp-concat": "^2.6.0",//合并文件"gulp-less": "^3.0.5",//編譯less，如果是sass還需要一個node的庫才能編譯"gulp-minify-css": "^1.2.3",//壓縮css"gulp-rename": "^1.2.2",//重新命名"gulp-template": "^3.1.0",//模板，這個可以替換一些關鍵字"gulp-uglify": "^1.5.3"//js壓縮混淆} }

編寫項目的gulpfile.js

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 = {cssLink: 'css/main.css',jsLink: 'js/main.min.js'};//資源路徑，一會會用template 來替換 gulp.task('clean', function() {return gulp.src('web', {read: false}).pipe(gclean()); }); gulp.task('minifycss', function() {gulp.src('src/less/*.less').pipe(less()).pipe(minifycss()) //執行壓縮.pipe(gulp.dest('web/css')); //輸出文件夾}); gulp.task('minifyjs', function() {gulp.src('src/js/*.js').pipe(concat('main.js')) //合并所有js到main.js.pipe(rename({suffix: '.min'})) //rename壓縮后的文件名.pipe(uglify()) //壓縮.pipe(gulp.dest('web/js')); //輸出 }); gulp.task('watch', function() {//監聽文件的變化gulp.watch('src/less/*.less', ['minifycss']);gulp.watch('src/js/*.js', ['minifyjs']);gulp.watch('src/*.html', ['temp']); });gulp.task('temp', function () {return gulp.src('src/*.html').pipe(template(data)).pipe(gulp.dest('web')); }); gulp.task('default', ['clean'], function(){gulp.start('minifycss', 'minifyjs','images',"temp","watch"); });

然后直接 gulp運行就會默認執行default這個任務，然后就會一直監聽文件的改動.

圖片壓縮

可以使用gulp的插件來壓縮，但是個人覺得還是用其他方法比較好，所以我把images放到了源碼外
推薦兩個壓縮圖片的網站tinypng 智圖
壓縮圖片在上線之前做就可以了

其他

還可以在這個流程中加入es6的編譯，需要兩個庫
還可以自動添加css前綴
等等

現在webpack很火，不過，對于簡單的項目來說gulp更適合

公眾號

我們的主頁

總結

以上是生活随笔為你收集整理的利用gulp处理简单的前端问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。