本篇文章主要介紹了淺談gulp創建完整的專案流程，現在分享給大家，也給大家做個參考。
gulp是前端開發過程中自動建置專案的工具，相同作用的還有grunt。建置工具依靠外掛程式能夠自動監控檔案變更以及完成js/sass/less/html/image/css/coffee等檔案的語法檢查、合併、重新命名、壓縮、格式化、瀏覽器自動刷新、部署檔案等功能。
所有的環境都是在 node 安裝好的基礎上執行的。 node -v 查看node的安裝。 npm -v查看npm 的安裝情況.
gulp自動化建置常用參數
1、src 讀取檔案或資料夾
2、dest 產生檔案也就是寫文件
3、watch 偵測檔案
4、tesk 指定任務
#5、pipe 用流的方式處理gulp.
gulp建立一個完整的項目的目錄結構如下
解釋：
bower_components 這個檔案下邊放的是透過bower安裝的第三方的js等。
build : 專案整合目錄，一般在這裡整合所有的程式碼，不壓縮。
dist : 專案發布目錄，也是壓縮所有檔案後的。
src : 專案原始檔目錄，這裡放置的都是原始檔。
test : 這個是寫自動化測試的
1、在終端機進入專案根目錄，安裝bower.
bower init
初始化Bower,產生bower.json文件，然後安裝所需的的插件以及第三方檔案例如angular 執行
bower install - - save angular
#具體查看bower 的使用方法。
2、安裝檢視gulp，在專案根目錄下。
全域安裝gulp
npm install --global gulp
然後建立設定檔
npm init 初始化並建立 package.json檔案
#npm install --save-dev gulp 將Node的配置環境裝進設定檔中。
然後安裝需要的插件
npm install xxx —save-dev將檔案自動寫入設定檔中。
一般常用的創建整站的有這些，多個的話可以將插件以空格的形式分開
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/',
//项目，发布目录上产部署
prdPath: 'dist/'
};
//通过bower安装的插件，需要拷贝到 devPath prdPath中
gulp.task('lib',function(){
// /**/* 读取这个文件夹下边的所有的文件或者文件夹
gulp.src('bower_components/**/*')
//读取完整后进行操作 西安拷贝到整合目录 并重命名，在拷贝到生产目录并重命名
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload()); //文件更改后自动变异 并执行启动服务重新打开浏览器
});
//将 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());
});
//拷贝 压缩 图片 最后放到发布目录下
gulp.task('image',function(){
gulp.src(app.srcPath + 'image/**/*')
//江源图片放到整合目录下，在压缩放到生产目录下
.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());
})
//编写服务
gulp.task('serve',['build'], function() {
$.connect.server({
//服务起来的入口
root: [app.devPath],
//文件更改后自动刷新页面
livereload: true,
//端口号
port: 1234
});
// 在 命令工具中执行 gulp serve 就相当于是启动了服务
//自动打开浏览器
open('http://localhost:1234');
//我们希望更改了文件，就自动编译，并且打包等然后打开浏览器
gulp.watch('bower_components/**/*' , ['lib']);
//监听 script 下边的 js 文件，并执行 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']);
//这样文件变更了就会自动构建
});
//默认执行的任务，直接 执行 gulp 变行了。都编写完成后再终端 执行 gulp 便可以了。
gulp.task('default', ['serve']);這樣利用gulp創建一個完整的專案流程就結束了
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是使用gulp如何建立完整的專案流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
