構建前端gulp自動化

看了不少關於Gulp自動化的相關教程，很感謝大神們的教程，

由於擔憂本身會忘記啥的，因此就把本身搭建gulp自動化的過程記錄下來~~~

 

gulp是依賴於Nodejs的，因此最好是有點nodejs的基礎，

搭建gulp分幾步呢？以下：

1.安裝Nodejs

　　安裝nodejs 咱們能夠直接去官網下載就好啦

　　https://nodejs.org/en/    

　　咱們選擇第一個就好啦(我安裝的是下面圈起來的這個版本)

　　

　　

 安裝好Node之後咱們須要安裝gulp

 

2.全局安裝gulp

　　cnpm install gulp -g

　　 

　　

 

 

　　這些安裝好了之後，咱們就準備開始爲項目搭建gulp了

 

3.進入項目文件夾，下載gulp

　　npm install gulp

　　

 

　　注意：在這裏有一個問題，明明咱們是在gulptest文件中下載的gulp 爲何node_modules文件夾會跑到外面去呢？？？

　　-------那是由於咱們沒有初始化   沒有生成package.json文件，因此咱們應該生產package.json文件之後再下載gulp

　　npm init

　　

 

       npm install --save-dev gulp

　　

　　這樣咱們就在項目文件夾中安裝好gulp 接下來咱們就開始寫gulpfile.js

4. 創建gulpfile.js文件

　　就像gruntjs須要一個Gruntfile.js文件同樣，gulp也須要一個文件做爲它的主文件，在gulp中這個文件叫作gulpfile.js。新建一個文件名爲gulpfile.js的文件，而後放到你的項目目錄中。以後要作的事情就是在gulpfile.js文件中定義咱們的任務了。下面是一個最簡單

　　的gulpfile.js文件內容示例，它定義了一個默認的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

　　此時咱們的目錄結構是這樣子的：

　　├── gulpfile.js
　　├── node_modules
　　│ └── gulp
　　└── package.json

 

　　如今咱們來運行一下gulp 看看返回的是什麼

 

　　 

　　在這裏輸出了 hello world 

　　說明這個簡單的gulpfile文件是可行的

　　可是呢? 咱們平時作項目須要的是搭建一個自動化，因此單單這樣是不行的，那咱們就繼續往下

5.利用connect來搭建建立一個web服務

//引入gulp包和gulp-connect包
var gulp=require('gulp');
var connect=require('gulp-connect');

gulp.task('webserver', function() {
    connect.server();
});
gulp.task('default', ['webserver']);

 

　　這裏咱們利用gulp-connect搭建了一個自動化，因此咱們的node_modules必須含有gulp-connect的包，若是沒有須要下載

　　

 

　　在gulp中require引入的包，若是沒有則須要本身手動下載   npm install 包名稱   

　　最後咱們再gulp 就能夠了

　　

 

　　而後咱們打開瀏覽器localhost:8080,便可瀏覽html文件

　　可是每次更改完之後仍是要咱們本身手動刷新，不過是至關於放到了一個環境中，能更貼切正式環境罷了，

　　有時候咱們的本地和正式環境有一點差距，須要咱們本身去把控避免了

6.web服務自動刷新

　　咱們會發現上面搭建的自動化服務沒有自動刷新，那應該怎麼辦呢？

//引入插件
var gulp = require('gulp');
var connect = require('gulp-connect');

//建立watch任務去檢測html文件,其定義了當html改動以後，去調用一個Gulp的Task
gulp.task('watch', function () {
    gulp.watch(['./**/*.html'], ['html']);
}); 
//使用connect啓動一個Web服務器

gulp.task('connect',function(){
    connect.server({
        root:'',
        port:8888,//更改端口名
        livereload:true
    })
})

gulp.task('html', function () {
    gulp.src(['./*.html'],['./**/*.html'])
        .pipe(connect.reload());
}); 
//運行Gulp時，默認的Task
gulp.task('default', ['connect', 'watch']);


打開git 

輸入gulp j便可啓動服務

 

　　而後咱們來看一下目錄結構

　　

 

　　 

 

　　咱們打開localhost:8080而後輸入你要查看的文件或者文件夾中的某個文件便可

　　好比我要查看demo.html

　　

　　咱們在編譯器中更改某個文件，那麼更改完畢必定要ctrl+s保存一下，這樣就能看到瀏覽器中也跟着更改