gulp教程記錄

GULP

gulp能夠做什麼東西？（以前這些工作都是人工做的）

• 檢查JavaScript
• 編譯Sass（或Less之類的）文件
• 圖片壓縮
• Css Js 合併
• Css Js 內聯
• 壓縮並重命名合併後的JavaScript
• 變更靜態資源
• 給靜態資源添加md5
• 合併雪碧圖
• 自動刷新瀏覽器
• ESLint
• rem移動端適配方案

等等。。

gulp的配置文件gulpfile.js（其實整個gulp的配置文件，基本上都是在做一些任務的配置，比如創建任務，監聽任務等等）

結合gulp的API https://www.gulpjs.com.cn/docs/api/

gulp只有5個方法

• task：這個API用來創建任務，在命令行下可以輸入gulp test來執行test的任務
• run：這個API用來運行任務
• watch：這個API用來監聽任務
• src：這個API設置需要處理的文件路徑，可以是多個文件以數組的形式[main.scss,vender.scss]，也可以是正在表達式/*.scss
• dest：這個API設置生成文件的路徑，一個任務可以有多個生成路徑，一個可以輸出未壓縮的版本，一個可以輸出壓縮後的版本

gulp的使用：

通過npm建立一個項目

//我的叫做gulp-study，也就是建立一個文件夾然後在當前文件夾下面運行npm init
//建立文件夾
mkdir gulp-study
//在當前文件夾運行npm init初始化項目
npm init

通過npm自動話構建需要的依賴

• gulp：本地gulp
• gulp-concat：主要用於合併文件，減少http請求
• gulp-imagemin：用於壓縮圖片
• gulp-jshint：用於js檢查
• gulp-less：用於編譯less文件
• gulp-minify-css：用於壓縮css文件
• gulp-rename
• gulp-sass：用於編譯sass文件

• gulp-uglify：用於打亂文件

  npm install –save-dev gulp gulp-concat jshint gulp-jshint gulp-less gulp-rename gulp-sass gulp-uglify gulp-minify-css gulp-imagemin

安裝完成後的package.json就是下面的樣子

{
  "name": "gulp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npm run start"
  },
  "author": "LQ",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-jshint": "^2.1.0",
    "gulp-less": "^3.5.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "jshint": "^2.9.5",
    "node-less": "^1.0.0",
    "require": "^2.4.20"
  },
  "dependencies": {
    "node-sass": "^4.9.0"
  }
}

很重要的一步 編寫gulpfile.js文件（自動話構建就是根據這個文件來）

//gulp是代碼由於配置的思想
//gulp只有5個方法，task，run，watch，src，和dest

//引入gulp
var gulp = require("gulp");

//引入組件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var less = require("gulp-less");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var minifycss = require("gulp-minify-css");
var rename = require("gulp-rename");

//gulp.src("src/js/*.js");
//創建一個個任務編譯less
gulp.task('less',function(){
  gulp.src('src/less/*.less')  //該任務針對的文件夾
      .pipe(less())  //該任務的調用模塊
      .pipe(minifycss())
      .pipe(gulp.dest("./dist/css"));  //另存壓縮後的文件，將會在dist/css下面生成index.css
});

//創建另外一個任務用於檢查腳本
gulp.task("lint",function(){
  gulp.src("src/js/*.js")
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
});

//創建一個任務用於合併壓縮文件
gulp.task("scripts",function(){
  gulp.src("src/js/*.js")
      .pipe(concat('all.js'))//合併之後的文件
      .pipe(rename('all.min.js'))//壓縮後的文件
      .pipe(uglify())
      .pipe(gulp.dest("./dist"));
});

//默認任務
gulp.task('default', function(){
    //默認執行的方法，引號內的內容對應上面task寫的內容
    gulp.run('lint', 'less', 'scripts');
    // 監聽JS文件變化
    gulp.watch('src/js/*.js', function(){
        //運行多個任務
        gulp.run('lint', 'less', 'scripts');
    });
     // 監聽less文件變化
    gulp.watch('src/less/*.less', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

我的項目結構如下：

上述完成編寫以後就是運行命令進行自動化構建了

//指的就是運行gulpfile.js中配置的default任務，當然也可以單獨運行其它的任務，例如gulp lint等等
gulp default

文件改變後，文件不會主動編譯問題，需要在控制檯輸入enter鍵，移除了default任務中的run方法後改寫爲如下形式就可以了

//默認任務
gulp.task('default', function(){
    gulp.run('lint', 'less', 'scripts');
    // 監聽JS文件變化
    gulp.watch('src/js/*.js',["scripts"]);
     // 監聽less文件變化
    gulp.watch('src/less/*.less',["less"]);
});

上面寫法和下面寫法一樣

//默認任務
gulp.task('default', function(){
    gulp.run('lint', 'less', 'scripts');
    // 監聽文件變化
    gulp.watch(['src/js/*.js','src/less/*.less'],["scripts","less"]);
});

構建中我遇到的問題：在運行自動話構建過程中失敗，報錯說是缺少了node-sass，安裝不成功，解決方式在如下鏈接中。https://segmentfault.com/a/1190000010984731