gulp配置前端資源自動(dòng)化 -- less編譯 js壓縮 圖片壓縮 合并sprite圖

gulp配置前端資源自動(dòng)化 -- less編譯 js壓縮 圖片壓縮

1.package.json 文件

{
  "name": "example-static",
  "version": "0.0.1",
  "description": "example-static",
  "author": "c.c.",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "del": "^2.2.2",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-less": "^3.3.0",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-uglify": "^2.1.2",
    "gulp.spritesmith": "^6.4.0",
    "imagemin-pngquant": "^5.0.0",
    "run-sequence": "^1.2.2"
  }
}

2.gulpfile.js 文件

var gulp = require('gulp');
// 編譯less
var less = require('gulp-less');
// 給css3屬性添加瀏覽器前綴插件
var autoprefixer = require('gulp-autoprefixer');
// 刪除文件插件
var del = require('del');
// 同步運(yùn)行任務(wù)插件
var runSequence = require('run-sequence');
// 壓縮js插件
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
// 壓縮圖片插件
var imagemin = require('gulp-imagemin');
// 壓縮png圖片的插件
var pngquant = require('imagemin-pngquant');
// 合成sprite圖片插件
var spritesmith = require('gulp.spritesmith');

// 清空數(shù)據(jù)
gulp.task('clean:dist', function() {
    return del.sync('dist');
});

// 編譯less
gulp.task('buildCss', function() {
    gulp.src(['static/seller/less/**/*.less'])
        .pipe(less())
        .pipe(gulp.dest('dist/seller/css'))
    gulp.src(['static/ec/less/**/*.less'])
        .pipe(less())
        .pipe(gulp.dest('dist/ec/css'))
});

// 壓縮js插件
gulp.task('buildJs', function() {
    gulp.src(['static/seller/js/**/*.js'])
        .pipe(gulpIf('*.js', uglify()))
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('dist/seller/js'));
});
// 圖片壓縮任務(wù)
gulp.task('buildImages', function() {
    gulp.src('static/seller/images/**/*.+(png|jpg|gif|svg)')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/seller/images'));
});
// 合并sprite圖任務(wù)
gulp.task('sprite', function() {
    var spriteData = gulp.src('static/seller/images/CCoin/*.png')
        .pipe(spritesmith({
            imgName: 'images/CCoin/sprite.png',
            cssName: 'less/CCoin/sprite.less',
            cssFormat: 'less',
            padding: 10
        }));
    return spriteData.pipe(gulp.dest('dist/seller'))
});
// 默認(rèn)執(zhí)行任務(wù)
gulp.task('default', function(callback) {
    runSequence([
        'clean:dist',
        'buildCss',
        'buildJs',
        'buildImages',
        'sprite'
    ], callback);
})

3.安裝模塊

npm install

4.運(yùn)行

glup
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末损拢,一起剝皮案震驚了整個(gè)濱河市痕届,隨后出現(xiàn)的幾起案子锣尉,更是在濱河造成了極大的恐慌其爵,老刑警劉巖岭粤,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異组题,居然都是意外死亡云矫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門矫渔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來彤蔽,“玉大人,你說我怎么就攤上這事庙洼《倩荆” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵油够,是天一觀的道長蚁袭。 經(jīng)常有香客問我,道長石咬,這世上最難降的妖魔是什么揩悄? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮鬼悠,結(jié)果婚禮上虏束,老公的妹妹穿的比我還像新娘。我一直安慰自己厦章,他們只是感情好镇匀,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著袜啃,像睡著了一般汗侵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上群发,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天晰韵,我揣著相機(jī)與錄音,去河邊找鬼熟妓。 笑死雪猪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的起愈。 我是一名探鬼主播只恨,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼译仗,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了官觅?” 一聲冷哼從身側(cè)響起纵菌,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎休涤,沒想到半個(gè)月后咱圆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡功氨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年序苏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捷凄。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡杠览,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出纵势,到底是詐尸還是另有隱情踱阿,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布钦铁,位于F島的核電站软舌,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏牛曹。R本人自食惡果不足惜佛点,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望黎比。 院中可真熱鬧超营,春花似錦、人聲如沸阅虫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽颓帝。三九已至米碰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間购城,已是汗流浹背吕座。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瘪板,地道東北人吴趴。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像侮攀,于是被迫代替她去往敵國和親锣枝。 傳聞我的和親對(duì)象是個(gè)殘疾皇子厢拭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 在現(xiàn)在的前端開發(fā)中,前后端分離惊橱、模塊化開發(fā)、版本控制箭昵、文件合并與壓縮税朴、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,433評(píng)論 1 32
  • gulpjs是一個(gè)前端構(gòu)建工具,與gruntjs相比家制,gulpjs無需寫一大堆繁雜的配置參數(shù)正林,API也非常簡單,學(xué)...
    依依玖玥閱讀 3,149評(píng)論 7 55
  • gulpjs是一個(gè)前端構(gòu)建工具颤殴,與gruntjs相比觅廓,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單涵但,學(xué)...
    井皮皮閱讀 1,292評(píng)論 0 10
  • gulpjs是一個(gè)前端構(gòu)建工具杈绸,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù)矮瘟,API也非常簡單瞳脓,學(xué)...
    小裁縫sun閱讀 922評(píng)論 0 3
  • 什么是GULP? GULP 是前端開發(fā)過程中對(duì)代碼進(jìn)行構(gòu)建的工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器澈侠;她不僅能 對(duì)...
    碧玉含香閱讀 651評(píng)論 0 0