基于Node.js的JavaScript項(xiàng)目構(gòu)建工具gulp的使用教程
npm install gulp --save-dev
什么是gulp？
gulp是新一代的前端項(xiàng)目構(gòu)建工具，你可以使用gulp及其插件對(duì)你的項(xiàng)目代碼（less,sass）進(jìn)行編譯，還可以壓縮你的js和css代碼，甚至壓縮你的圖片，gulp僅有少量的API，所以非常容易學(xué)習(xí)。 gulp 使用 stream 方式處理內(nèi)容。Node催生了一批自動(dòng)化工具，像Bower，Yeoman，Grunt等。
gulp和grunt的異同點(diǎn)
易于使用：采用代碼優(yōu)于配置策略，Gulp讓簡(jiǎn)單的事情繼續(xù)簡(jiǎn)單，復(fù)雜的任務(wù)變得可管理。
高效：通過(guò)利用Node.js強(qiáng)大的流，不需要往磁盤寫(xiě)中間文件，可以更快地完成構(gòu)建。
高質(zhì)量：Gulp嚴(yán)格的插件指導(dǎo)方針，確保插件簡(jiǎn)單并且按你期望的方式工作。
易于學(xué)習(xí)：通過(guò)把API降到最少，你能在很短的時(shí)間內(nèi)學(xué)會(huì)Gulp。構(gòu)建工作就像你設(shè)想的一樣：是一系列流管道。
因?yàn)間ulp是用node.js寫(xiě)的，所以你需要在你的終端上安裝好npm。npm是node.js的包管理器，所以先在你的機(jī)子上安裝好node.js吧。
gulp安裝命令
sudo npm install -g gulp
在根目錄下新建package.json文件
npm init .
安裝gulp包
安裝好后再次輸入gulp -v查看版本號(hào)，如下圖顯示則為成功：
安裝插件
安裝常用插件：
sass的編譯 （gulp-ruby-sass）
自動(dòng)添加css前綴 （gulp-autoprefixer）
壓縮css （gulp-minify-css）
js代碼校驗(yàn) （gulp-jshint）
合并js文件 （gulp-concat）
壓縮js代碼 （gulp-uglify）
壓縮圖片 （gulp-imagemin）
自動(dòng)刷新頁(yè)面 （gulp-livereload）
圖片緩存，只有圖片替換了才壓縮 （gulp-cache）
更改提醒 （gulp-notify）
清除文件 （del）
安裝這些插件需要運(yùn)行如下命令：
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
-save和-save-dev可以省掉你手動(dòng)修改package.json文件的步驟。
npm install module-name -save
自動(dòng)把模塊和版本號(hào)添加到dependencies部分
npm install module-name -save-dev
自動(dòng)把模塊和版本號(hào)添加到devdependencies部分
gulp命令
你僅僅需要知道的5個(gè)gulp命令
gulp.task(name[, deps], fn) 定義任務(wù) name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
gulp.run(tasks...)：盡可能多的并行運(yùn)行多個(gè)task
gulp.watch(glob, fn)：當(dāng)glob內(nèi)容發(fā)生改變時(shí)，執(zhí)行fn
gulp.src(glob)：置需要處理的文件的路徑，可以是多個(gè)文件以數(shù)組的形式，也可以是正則
gulp.dest(path[, options])：設(shè)置生成文件的路徑
glob：可以是一個(gè)直接的文件路徑。他的含義是模式匹配。
gulp將要處理的文件通過(guò)管道（pipe()）API導(dǎo)向相關(guān)插件。通過(guò)插件執(zhí)行文件的處理任務(wù)。
gulp.task('default', function () {...});
gulp.task這個(gè)API用來(lái)創(chuàng)建任務(wù)，在命令行下可以輸入$ gulp [default]，（中括號(hào)表示可選）來(lái)執(zhí)行上面的任務(wù)。
gulp官方API文檔：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 插件大全：http://gulpjs.com/plugins/
開(kāi)始構(gòu)建項(xiàng)目
在項(xiàng)目根目錄下新建一個(gè)gulpfile.js文件，粘貼如下代碼：
//在項(xiàng)目根目錄引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('compress',function(){
return gulp.src('script/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
注：gulpfile.js文件名不可更改。
項(xiàng)目需要用到uglify和rename插件，執(zhí)行以下命令安裝：
npm install --save-dev gulp-uglify npm install --save-dev gulp-rename
以我的為例，進(jìn)入gulpfile.js所在目錄：
cd /Users/trigkit4/gulp-test
然后輸入：
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('compress',function(){
return gulp.src('script/*.js')
.pipe(uglify())
.pipe(rename('jquery.ui.min.js'))
.pipe(gulp.dest('dist'));
});
該命令會(huì)安裝package.json下的全部依賴，如下圖所示：
完整的gulpfile.js
// 載入外掛
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
// 樣式
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// 腳本
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// 圖片
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// 清理
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
.pipe(clean());
});
// 預(yù)設(shè)任務(wù)
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// 看守
gulp.task('watch', function() {
// 看守所有.scss檔
gulp.watch('src/styles/**/*.scss', ['styles']);
// 看守所有.js檔
gulp.watch('src/scripts/**/*.js', ['scripts']);
// 看守所有圖片檔
gulp.watch('src/images/**/*', ['images']);
// 建立即時(shí)重整伺服器
var server = livereload();
// 看守所有位在 dist/ 目錄下的檔案，一旦有更動(dòng)，便進(jìn)行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
});
});
注：pipe()是stream模塊里傳遞數(shù)據(jù)流的一個(gè)方法，第一個(gè)參數(shù)為插件方法，插件會(huì)接收從上游流下的文件，進(jìn)行處理加工后，再往下流。
gulp.task('任務(wù)名稱', function () {
return gulp.src('文件路徑')
.pipe(...)
.pipe(...)
// 直到任務(wù)的最后一步
.pipe(...);
});
gulp插件
gulp-gh-pages：使用gulp來(lái)把markdown生成html文檔并上傳到git pages上
https://github.com/shinnn/gulp-gh-pages
var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');
gulp.task('deploy', function() {
return gulp.src('./dist/**/*')
.pipe(ghPages());
});
gulp-jade插件：將jade編譯成html文件
gulp-less插件：將less編譯成css文件
var less = require('gulp-less');
var path = require('path');
gulp.task('less', function () {
return gulp.src('./less/**/*.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./public/css'));
});
gulp-live-server 插件：方便的，輕量級(jí)的服務(wù)器
var gulp = require('gulp');
var gls = require('gulp-live-server');
gulp.task('serve', function() {
//1. serve with default settings
var server = gls.static(); //equals to gls.static('public', 3000);
server.start();
//2. serve at custom port
var server = gls.static('dist', 8888);
server.start();
//3. serve multi folders
var server = gls.static(['dist', '.tmp']);
server.start();
//use gulp.watch to trigger server actions(notify, start or stop)
gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {
server.notify.apply(server, [file]);
});
});
gulp-livereload，可以實(shí)時(shí)保存刷新，那樣就不用按F5和切換界面了
gulp-load-plugins：在你的package.json文件中自動(dòng)加載任意的gulp插件
$ npm install --save-dev gulp-load-plugins
例如一個(gè)給定的package.json文件如下：
{
"dependencies": {
"gulp-jshint": "*",
"gulp-concat": "*"
}
}
在gulpfile.js中添加如下代碼：
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
plugins.jshint = require('gulp-jshint');
plugins.concat = require('gulp-concat');
gulp-babel：gulp 的babel插件，
$ npm install --save-dev gulp-babel babel-preset-es2015
使用方法：
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () => {
return gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
});
官方github： https://github.com/gulpjs/gulp
相關(guān)文章
JavaScript圓形虛幻效果，跟PS里面的羽化效果有點(diǎn)像，需要的朋友可以參考下。2011-12-12
有關(guān)跨域訪問(wèn)的的文章，可以搜到很多，基本上大同小異，下面有個(gè)不錯(cuò)的訪問(wèn)示例，大家可以參考下2014-05-05
這篇文章主要介紹了asp.net+js實(shí)現(xiàn)金額格式化的相關(guān)資料,需要的朋友可以參考下2015-02-02
不讓瀏覽器讀取緩存，故采用家隨機(jī)數(shù)方式引入腳本的方式，此法適用于及時(shí)刷新不讀緩存的情況2014-09-09
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評(píng)估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關(guān)介紹，感興趣的朋友可以參考一下2022-09-09
JavaScript統(tǒng)計(jì)數(shù)組中相同的數(shù)量的方法總結(jié)
在JavaScript中，我們經(jīng)常需要對(duì)數(shù)組中對(duì)象的屬性進(jìn)行統(tǒng)計(jì)。在本文中，我們將介紹如何使用JavaScript來(lái)實(shí)現(xiàn)這一功能，文中有詳細(xì)的代碼示例，需要的朋友可以借鑒參考2023-05-05
這篇文章主要為大家詳細(xì)介紹了js添加事件的通用方法，還為大家介紹了js綁定事件的常用方式，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了純css下拉菜單代碼，無(wú)需js，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
使用JS代碼實(shí)現(xiàn)點(diǎn)擊按鈕下載文件
有時(shí)候我們?cè)诰W(wǎng)頁(yè)上需要增加一個(gè)下載按鈕，讓用戶能夠點(diǎn)擊后下載頁(yè)面上的資料，那么怎樣才能實(shí)現(xiàn)功能呢？今天小編給大家分享兩種方法實(shí)現(xiàn)js實(shí)現(xiàn)點(diǎn)擊按鈕下載文件，需要的朋友參考下吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05