Gulp學習筆記

2. 安裝node.js:node.js官網
3. 選裝cnpm:
   1. 官方網址：http://npm.taobao.org
   2. 安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤
4. 全局安裝gulp：
   1. 安裝：命令提示符執行cnpm install gulp -g
   2. 查看是否正確安裝：命令提示符執行gulp -v，出現版本號即爲正確安裝
5. 新建package.json文件
   1. 說明：package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；
   2. 它是這樣一個json文件（注意：json文件內是不能寫註釋的，複製下列內容請刪除註釋）：

      1.  1 {
          2   "name": "test",   //項目名稱（必須）
          3   "version": "1.0.0",   //項目版本（必須）
          4   "description": "This is for study gulp project !",   //項目描述（必須）
          5   "homepage": "",   //項目主頁
          6   "repository": {    //項目資源庫
          7     "type": "git",
          8     "url": "https://git.oschina.net/xxxx"
          9   },
         10   "author": {    //項目做者信息
         11     "name": "surging",
         12     "email": "surging2@qq.com"
         13   },
         14   "license": "ISC",    //項目許可協議
         15   "devDependencies": {    //項目依賴的插件
         16     "gulp": "^3.8.11",
         17     "gulp-less": "^3.0.0"
         18   }
         19 }

   3. 固然咱們能夠手動新建這個配置文件，可是做爲一名有志青年，咱們應該使用更爲效率的方法：命令提示符執行cnpm init
   4. 查看package.json幫助文檔，命令提示符執行cnpm help package.json
   5. 特別注意：package.json是一個普通json文件，因此不能添加任何註釋。參看 http://www.zhihu.com/question/23004511
6. 本地安裝gulp插件
   1. 安裝：定位目錄命令後提示符執行cnpm install --save-dev
   2. 本示例以gulp-less爲例（編譯less文件），命令提示符執行cnpm install gulp-less --save-dev

   3. 將會安裝在node_modules的gulp-less目錄下，該目錄下有一個gulp-less的使用幫助文檔README.md

   4. 爲了能正常使用，咱們還得本地安裝gulp：cnpm install gulp --save-dev

   5. PS：細心的你可能會發現，咱們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能
7. 新建gulpfile.js文件（重要）
   1. 說明：gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件（其實將gulpfile.js放入其餘文件夾下亦可）
   2. 它大概是這樣一個js文件（更多插件配置請查看這裏）：

        1 const  gulp=require('gulp');    //引用gulp
        2 const  del=require('del');      //引用gulp刪除插件
        3 const  uglify=require('gulp-uglify');　　//引用壓縮Js插件
        4 const  css=require('gulp-clean-css');　　//gulp壓縮css文件
        5 const  rename = require("gulp-rename");　　//引用重命名插件
        6  
        7 gulp.task('hello',function () {     //定義一個hello任務
        8     console.log('hello')
        9 });
       10  
       11 //task()：定義任務
       12 //src():源文件
       13 // pipe():管道流，接通源頭文件與目標文件的輸出
       14 // dest():輸出文件的目的地
       15 // watch():監視文件
       16 //事例：
       17 // 一、複製單個文件
       18 gulp.task('copyHtml',function () {
       19     return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public"))
       20 });
       21  
       22 // 二、複製多個文件
       23 gulp.task('copyAllHtml',function () {
       24     return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public'));
       25 });
       26  
       27 // 三、複製指定文件
       28 // [指定的文件已，指定的文件2]
       29 gulp.task('copy2Js',function () {
       30     return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js'])
       31     .pipe(gulp.dest("dist/public/js"))
       32 });
       33  
       34 // 四、某個文件
       35 // ！排隊的文件
       36 gulp.task("copyNoJs",function () {
       37     return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js'])
       38         .pipe(gulp.dest('dist/public/js'))
       39 });
       40  
       41 // 五、複製多個後綴名的圖片
       42 // {選項一，選項二}
       43 gulp.task("copyImage",function () {
       44     return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}')
       45         .pipe(gulp.dest('dist/public/img'))
       46 });
       47  
       48 // 六、執行多個任務
       49 // gulp.task('任務名稱',[任務依賴的模塊],回調函數)
       50 // 依賴任務之間沒有順序之分，異步執行
       51 // 依賴任務之間完成後，在執行當前的回調函數
       52 gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () {
       53     console.log('編譯成功')
       54 });
       55  
       56 // 七、Watch:監視文件的變化
       57 gulp.task('myWatch',function () {
       58     gulp.watch('./src/public/login.html',['build'])
       59 });
       60  
       61 // 八、刪除文件
       62 gulp.task("del",function () {
       63     // del('./dist/public/img/*.{jpg,png,jepg,gif}')
       64     // *：全部文件
       65     // **：全部文件夾
       66     del(['./dist/public/js/*']);
       67     del(['./dist/**/*']);
       68 });
       69  
       70 gulp.task('default',function () {
       71     gulp.start('serve')
       72  
       73 });
       74  
       75 // 九、壓縮js文件
       76 gulp.task('ysjs',function(){
       77     return gulp.src('./src/public/js/*.js')
       78     .pipe(uglify())
       79     .pipe(gulp.dest('./src/public/js'));
       80  
       81  
       82 });
       83  
       84 //十、 添加監聽
       85 gulp.task('watch_js',function(){
       86     return gulp.watch('./src/public/js/*.js',['ysjs'])
       87  
       88 });
       89  
       90 //十一、壓縮css文件
       91 gulp.task('css',function () {
       92     return gulp.src('./src/public/sass/*.css')
       93         .pipe(css())
       94         .pipe(gulp.dest('./src/public/sass'))
       95 });
       96 //添加監聽
       97 gulp.task('jtCss',function () {
       98     return gulp.watch('./src/public/sass/*.css',['css'])
       99 });
      100 //十二、重命名css文件
      101 gulp.task('reName',function () {
      102     return gulp.src('./src/public/sass/*.css')
      103         .pipe(rename({suffix: '.css'}))
      104         .pipe(css())
      105         .pipe(gulp.dest('./src/public/sass'))
      106 });　

8. 運行gulp
   1. 說明：命令提示符執行gulp 任務名稱
   2. 編譯less：命令提示符執行gulp testLess
   3. 當執行gulp default或gulp將會調用default任務裏的全部任務[‘testLess’,’elseTask’]
9. 使用webstorm運行gulp任務
   1. 說明：使用webstorm可視化運行gulp任務
   2. 使用方法：將項目導入webstorm，右鍵gulpfile.js 選擇」Show Gulp Tasks」打開Gulp窗口，若出現」No task found」，選擇右鍵」Reload tasks」，雙擊運行便可
10. 使用vscode運行gulp任務