Why Gulp?
gulp是前端開發(fā)過程中對代碼進行構(gòu)建的工具猛频，是自動化項目的構(gòu)建利器；它不僅能對網(wǎng)站資源進行優(yōu)化蛛勉，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成鹿寻；使用它，我們不僅可以很愉快的編寫代碼诽凌，而且大大提高我們的工作效率
舉一個栗子: 前端開發(fā)中毡熏，一個網(wǎng)站有二十幾個的頁面，因此也有很多的css和js, 如果不用gulp侣诵，你會怎么做痢法，如果從代碼方便維護的角度出發(fā)你應(yīng)該把文件放在多個文件里狱窘，比如"header.css","global.css","index.css","mobile.css", 但是從網(wǎng)站性能的角度出發(fā)，你可能應(yīng)該把所有css放在一個文件里疯暑，所有js也最好放在一個文件里（因為請求數(shù)量的減少往往意味網(wǎng)站性能的提高)训柴， 但這樣代碼的可維護性也就差了， 矛盾就這樣產(chǎn)生了妇拯。 而在這里gulp正好就可以來解決這種問題: 你依然可以將代碼放在多個文件里幻馁，然后通過gulp進行合并、壓縮等處理越锈，最終網(wǎng)頁上還是只引用一個文件仗嗦。 性能和代碼的可維護性都兼顧了， 你的css和js代碼可以分得更細致也沒關(guān)系甘凭。
當(dāng)然稀拐，這只是gulp最常見的功能之一，他還能做很多其他的事情，比如對es6 javascript代碼進行轉(zhuǎn)碼泉蝌，使得常見的瀏覽器能夠識別扎阶，它還可以用來做angularjs, vue, reactjs等前端框架的腳手架。
可以說gulp在前端構(gòu)建方面扮演著非常重要的角色蜓洪，所以說它是前端構(gòu)建工具的代表，其他常見的還有webpack, grunt等坯苹。
How to Start
開始的開始隆檀，安裝nodejs和npm環(huán)境.
一般情況下，nodejs的安裝包都自帶了npm, 所以在安裝完nodejs后即可直接使用npm了粹湃。
這里有兩個名詞恐仑，第一個nodejs不用說了, 火遍了整個互聯(lián)網(wǎng)，從前端到后臺到處有它的身影为鳄，想必大家都知道裳仆。 npm可能有的人不清楚，npm是node package manager的縮寫济赎，這么說大家應(yīng)該就明白了鉴逞，說白了，npm就是nodejs的包管理器司训。
使用了nodejs的項目构捡，基本上都會有node_modules這么一個目錄, 這個目錄就是存放nodejs的包的地方。同時還會有一個文件package.json壳猜，這是npm用來管理node_modules模塊的配置文件, 它看起來像這樣
其中的 dependencies 指定了該項目所依賴的包
入門指南
實戰(zhàn)
接下來勾徽，我們跟大家一起動手嘗試一下用gulp來進行前端css/js壓縮打包的例子
目錄結(jié)構(gòu)
使用了gulp的項目資源目錄通常會像這樣
gulpfile.js 這個是用來定義gulp要執(zhí)行的任務(wù)的配置文件
步驟
- 建立目錄結(jié)構(gòu)
- 創(chuàng)建package.json
npm init
- 下載所有必須的依賴包
npm install --save-dev gulp
npm install --save-dev gulp-sass
npm install --save-dev gulp-concat
npm install --save-dev gulp-minify
npm install --save-dev gulp-uglifycss
npm install --save-dev browser-sync
也可以這樣運行(注意: 模塊之間應(yīng)該用空格分隔, 不能用tab分隔)
npm install --save-dev gulp gulp-sass gulp-concat gulp-minify gulp-uglifycss browser-sync
- 建立gulpfile.js
- 運行g(shù)ulp, 進行項目的開發(fā)
最后, 附上一個gulpfile.js的例子:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var minify = require('gulp-minify');
var uglifycss = require('gulp-uglifycss');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('styles',function(){
gulp.src([
'src/vender/rangeslider/rangeslider.css',
'src/sass/app.scss'
])
.pipe(sass().on('error', sass.logError))
.pipe(concat('styles.min.css'))
.pipe(uglifycss({"maxLineLen": 800,"uglyComments": true}))
.pipe(gulp.dest('dest/css'));
});
gulp.task('scripts', function() {
gulp.src([
'src/vender/rangeslider/rangeslider.min.js',
'src/js/main.js'
])
.pipe(concat('scripts.js'))
.pipe(minify({ext:{src:'.debug.js',min:'.min.js'}}))
.pipe(gulp.dest('dest/js'));
});
gulp.task('watch', ['build'], browserSync.reload);
// BrowserSync
gulp.task('serve', ['build'], function() {
browserSync({
server: {
baseDir: 'dest'
},
open: true,
online: false,
notify: true,
});
//要監(jiān)控的文件
gulp.watch([
'src/js/main.js'
],['watch']);
});
gulp.task('build', ['styles', 'scripts']);
gulp.task('default', ['build']);
