這篇文章主要介紹gulp如何創(chuàng)建完整的項目，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、鹽城網(wǎng)站維護、網(wǎng)站推廣。

gulp是前端開發(fā)過程中自動構(gòu)建項目的工具，相同作用的還有g(shù)runt。構(gòu)建工具依靠插件能夠自動監(jiān)測文件變化以及完成js/sass/less/html/image/css/coffee等文件的語法檢查、合并、重命名、壓縮、格式化、瀏覽器自動刷新、部署文件等功能。

所有的環(huán)境都是在 node 安裝好的基礎(chǔ)上執(zhí)行的。 node -v 查看node的安裝情況。npm -v查看npm 的安裝情況.

gulp自動化構(gòu)建常用參數(shù)

1、src 讀取文件或者文件夾

2、dest 生成文件也就是寫文件

3、watch 檢測文件

4、tesk 指定任務(wù)

5、pipe 用流的方式處理 gulp.

gulp創(chuàng)建一個完整的項目的目錄結(jié)構(gòu)如下

解釋：

bower_components 這個文件下邊放的是 通過bower安裝的第三方的js等。

build  : 項目整合目錄，一般在這里整合所有的代碼，不壓縮。

dist : 項目發(fā)布目錄，也是壓縮所有文件后的。

src :  項目源文件目錄，這里放置的都是源文件。

test : 這個是編寫自動化測試的

1、在終端進入項目根目錄，安裝bower.

bower init

初始化Bower,生成bower.json文件，然后安裝需要的的插件以及第三方文件例如angular  執(zhí)行

bower install - - save angular

具體查看 bower 的使用方法。

2、安裝查看gulp，在項目根目錄下。

全局安裝gulp

npm install --global gulp

然后創(chuàng)建配置文件 

npm init    初始化并創(chuàng)建 package.json文件

npm install --save-dev gulp  將Node的配置環(huán)境裝進配置文件中。

然后安裝需要的插件

npm install xxx —save-dev將文件自動寫進配置文件中。

一般常用的創(chuàng)建整站的有這些，多個的話可以將插件以空格的形式分開

復(fù)制代碼 代碼如下:

npm install gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open  -—save-dev

然后則是gulpfile.js配置文件的編寫。具體為下

//引入gulp
var gulp = require('gulp');
//這樣的話 其他的模塊可以直接使用 $ 符號來引入
var $ = require('gulp-load-plugins')();
var open = require('open');

//定義目錄路徑
var app = {
 //源代碼，文件目錄
 srcPath: 'src/',
 //文件整合之后的目錄
 devPath: 'build/',
 //項目，發(fā)布目錄上產(chǎn)部署
 prdPath: 'dist/'
};

//通過bower安裝的插件，需要拷貝到 devPath prdPath中
gulp.task('lib',function(){
 // /**/* 讀取這個文件夾下邊的所有的文件或者文件夾
 gulp.src('bower_components/**/*')
 //讀取完整后進行操作 西安拷貝到整合目錄 并重命名，在拷貝到生產(chǎn)目錄并重命名
 .pipe(gulp.dest(app.devPath + 'vendor'))
 .pipe(gulp.dest(app.prdPath + 'vendor'))
 .pipe($.connect.reload()); //文件更改后自動變異 并執(zhí)行啟動服務(wù)重新打開瀏覽器
});
//將 html 拷貝到 devPath prdPath中
gulp.task('html',function(){
 gulp.src(app.srcPath + '**/*.html')
 .pipe(gulp.dest(app.devPath))
 .pipe(gulp.dest(app.prdPath))
 .pipe($.connect.reload());
});
//將 模擬的json 文件 拷貝到 devPath prdPath中
gulp.task('json',function(){
 gulp.src(app.srcPath + 'data/**/*.json')
 .pipe(gulp.dest(app.devPath + 'data'))
 .pipe(gulp.dest(app.prdPath + 'data'))
 .pipe($.connect.reload());
});

//將 index.less 文件 拷貝到 devPath prdPath中，index.less引入了所有的其他的less
gulp.task('less',function(){
 gulp.src(app.srcPath + 'style/index.less')
 .pipe($.less())
 .pipe(gulp.dest(app.devPath + 'css'))
 .pipe($.cssmin())
 .pipe(gulp.dest(app.prdPath + 'css'))
 .pipe($.connect.reload());
});
// 拷貝 js 文件 將所有的源文件中的js 文件整合成index.js 然后拷貝過去
gulp.task('script',function(){
 gulp.src(app.srcPath + 'script/**/*.js')
 .pipe($.concat('index.js'))
 .pipe(gulp.dest(app.devPath + 'js'))
 .pipe($.uglify())
 .pipe(gulp.dest(app.prdPath + 'js'))
 .pipe($.connect.reload());
});

//拷貝 壓縮 圖片 最后放到發(fā)布目錄下
gulp.task('image',function(){
 gulp.src(app.srcPath + 'image/**/*')
 //江源圖片放到整合目錄下，在壓縮放到生產(chǎn)目錄下
 .pipe(gulp.dest(app.devPath + 'image'))
 .pipe($.imagemin())
 .pipe(gulp.dest(app.prdPath + 'image'))
 .pipe($.connect.reload());
});

//總的方法
gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);

//清除舊文件，每次更新的時候
gulp.task('clean',function(){
 gulp.src([app.devPath,app.prdPath])
 .pipe($.clean());
})

//編寫服務(wù)
gulp.task('serve',['build'], function() {
 $.connect.server({
  //服務(wù)起來的入口
  root: [app.devPath],
  //文件更改后自動刷新頁面
  livereload: true,
  //端口號
  port: 1234
 });
 // 在 命令工具中執(zhí)行 gulp serve 就相當(dāng)于是啟動了服務(wù)
 //自動打開瀏覽器
 open('http://localhost:1234');
 //我們希望更改了文件，就自動編譯，并且打包等然后打開瀏覽器
 gulp.watch('bower_components/**/*' , ['lib']);
 //監(jiān)聽 script 下邊的 js 文件，并執(zhí)行 script 方法
 gulp.watch(app.srcPath + 'script/**/*.js', ['script']);
 gulp.watch(app.srcPath + '**/*.html', ['html']);
 gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
 gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
 gulp.watch(app.srcPath + 'image/**/*', ['image']);
 //這樣文件變更了就會自動構(gòu)建
});
//默認(rèn)執(zhí)行的任務(wù)，直接 執(zhí)行 gulp 變行了。都編寫完成后再終端 執(zhí)行 gulp 便可以了。
gulp.task('default', ['serve']);

這樣利用gulp創(chuàng)建一個完整的項目流程就結(jié)束了

以上是“gulp如何創(chuàng)建完整的項目”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！