gulp安裝

首先要確保pc上裝有node,然后在global環(huán)境和項(xiàng)目文件中都install gulp

npm install gulp -g ? (global環(huán)境)

npm install gulp --save-dev (項(xiàng)目環(huán)境)

在項(xiàng)目中install需要的gulp插件,一般只壓縮的話需要

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

更多插件可以在這個(gè)鏈接中找到?http://gratimax.net/search-gulp-plugins/

在項(xiàng)目的根目錄新建gulpfile.js,require需要的module

var gulp = require('gulp'),

minifycss = require('gulp-minify-css'),

concat = require('gulp-concat'),

uglify = require('gulp-uglify'),

rename = require('gulp-rename'),

del = require('del');

壓縮css

gulp.task('minifycss', function() {

return gulp.src('src/*.css') ? ? ?//壓縮的文件

.pipe(gulp.dest('minified/css')) ? //輸出文件夾

.pipe(minifycss()); ? //執(zhí)行壓縮

});

壓縮js

gulp.task('minifyjs', function() {

return gulp.src('src/*.js')

.pipe(concat('main.js')) ? ?//合并所有js到main.js

.pipe(gulp.dest('minified/js')) ? ?//輸出main.js到文件夾

.pipe(rename({suffix: '.min'})) ? //rename壓縮后的文件名

.pipe(uglify()) ? ?//壓縮

.pipe(gulp.dest('minified/js')); ?//輸出

});

執(zhí)行壓縮前,先刪除文件夾里的內(nèi)容

gulp.task('clean', function(cb) {

del(['minified/css', 'minified/js'], cb)

});

默認(rèn)命令,在cmd中輸入gulp后,執(zhí)行的就是這個(gè)命令

gulp.task('default', ['clean'], function() {

gulp.start('minifycss', 'minifyjs');

});

8

然后只要cmd中執(zhí)行,gulp即可

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容