gulp是一個構(gòu)建工具哥捕,可以通過它自動執(zhí)行網(wǎng)站開發(fā)過程中的公共任務(wù),例如:編譯sass/less,編譯壓縮混淆javaScript,合并編譯模板和版本控制等浅辙。
安裝gulp
首先扭弧,檢測node.js是否存在,因?yàn)間ulp的使用需要node環(huán)境记舆。
接著鸽捻,在項(xiàng)目目錄中安裝gulp為本地模塊
本地安裝gulp
npm install --save-dev gulp
最后,安裝項(xiàng)目中依賴的 gulp plugin模塊gulp-cssmin, gulp-jshint
npm install --save-dev gulp-cssmin gulp-jshint
使用
首先泽腮,在根目錄中創(chuàng)建一個gulpfile文件御蒲。然后寫.....
var gulp = require('gulp'); //加載gulp模塊
var uglifyJs = require('gulp-uglify'); //加載uglify模塊
var cleanCss = require('gulp-clean-css'); //加載clean模塊
//定義一個壓縮js代碼的任務(wù)
gulp.task('uglifyJs', [], function() {
gulp.src('build/.js') //找到原始文件
.pipe(uglifyJs()) //壓縮js代碼
.pipe(gulp.dest('js')); //壓縮后的代碼儲存在這里
});
// //定義一個壓縮css代碼的任務(wù)
//gulp.task('cleanCss', [], function() {
// gulp.src('gulp/.css') //找到原始文件
// .pipe(cleanCss()) //壓縮css代碼
// .pipe(gulp.dest('gulp/build')); //壓縮后的代碼儲存在這里
//});
// //定義一個監(jiān)聽任務(wù)
gulp.task('watch', function() {
//監(jiān)聽文件,一旦文件有變化诊赊,就執(zhí)行相應(yīng)的任務(wù)
gulp.watch('build/.js', ['uglifyJs']);
// gulp.watch('gulp/.css', ['cleanCss']);
});
// //默認(rèn)執(zhí)行的任務(wù), 執(zhí)行完數(shù)組中的任務(wù)之后厚满,再執(zhí)行當(dāng)前任務(wù)
gulp.task('default', ['uglifyJs'], function() {
console.log('執(zhí)行完畢');
});