gulp建立完整的項目流程

全部的環境都是在 node 安裝好的基礎上執行的。 node -v 查看node的安裝狀況。npm -v查看npm 的安裝狀況.

gulp自動化構建經常使用參數

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

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

三、watch 檢測文件

四、tesk 指定任務

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

gulp建立一個完整的項目的目錄結構以下

解釋：

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

build  : 項目整合目錄，通常在這裏整合全部的代碼，不壓縮。

dist : 項目發佈目錄，也是壓縮全部文件後的。

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

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

 

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

 bower init 

初始化Bower,生成bower.json文件，而後安裝須要的的插件以及第三方文件例如angular  執行

 bower install - - save angular

具體查看 bower 的使用方法。

二、安裝查看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建立一個完整的項目流程就結束了