Gulp實戰

時間 2019-11-26

標籤 gulp 實戰欄目 JavaScript 简体版

原文原文鏈接

推薦文章：css

gulp.js中文網 : http://www.gulpjs.com.cn/html

DBPOO ： http://www.dbpoo.com/getting-started-with-gulp/node

Ooo_My_God ： http://www.ydcss.com/archives/424css3

w3cplus ： http://www.w3cplus.com/blog/tags/511.html web

demo截圖:chrome

講一下目錄結構：npm

c\ 文件夾爲發佈css文件夾(css簡寫);編程

i\ 文件夾爲發佈img文件夾(img簡寫);json

j\ 文件夾爲發佈js文件夾(js簡寫);gulp

src\ 生產環境下的文件

config.js 爲gulp里路徑配置的文件(可不寫)

gulpfile.js 爲gulp配置文件

package.json node安裝配置文件

總文件夾：

生產文件夾：

package.json:

 1 {
 2   "name": "test-gulp2",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "uuu",
10   "license": "ISC",
11   "devDependencies": {
12     "gulp": "^3.9.1",
13     "gulp-autoprefixer": "^3.1.0",
14     "gulp-concat": "^2.6.0",
15     "gulp-connect": "^3.2.1",
16     "gulp-htmlmin": "^1.3.0",
17     "gulp-imagemin": "^2.4.0",
18     "gulp-jshint": "^2.0.0",
19     "gulp-livereload": "^3.8.1",
20     "gulp-minify-css": "^1.2.4",
21     "gulp-notify": "^2.2.0",
22     "gulp-rename": "^1.2.2",
23     "gulp-rev-append": "^0.1.6",
24     "gulp-sass": "^2.2.0",
25     "gulp-uglify": "^1.5.3",
26     "imagemin-pngquant": "^4.2.2"
27   }
28 }

View Code

gulpfile.js:

  1 'use strict';
  2 var gulp = require('gulp');
  3 var connect = require('gulp-connect');  //啓動服務器:http://localhost:8000/;
  4 var rename = require('gulp-rename');    //更名;
  5 var concat = require('gulp-concat');    //文件合併;
  6 var notify = require('gulp-notify');    //提示;
  7 var config = require('./config.js');    //引入配置文件;
  8 
  9 var port = config.port;//端口號;
 10 var livereload = require('gulp-livereload'); //刷新瀏覽器;
 11 
 12 /* 啓動服務器 */
 13 gulp.task('webserver',function(){
 14     connect.server({
 15         port : port,
 16         livereload:true
 17     });
 18 });
 19 
 20 //編譯Sass   compact(編譯一行)/compressed(壓縮一行);
 21 var sass = require('gulp-sass');   //編譯sass;
 22 var minifycss = require('gulp-minify-css');  
 23 var autoprefixer = require('gulp-autoprefixer');  //自動補全css3前綴;
 24 gulp.task('sass', function() {
 25 
 26     var cssSrc = config.css.src,
 27         cssDst = config.css.dist;
 28 
 29     gulp.src( cssSrc )
 30         .pipe( sass({outputStyle: 'compact'}).on('error', sass.logError) )  //sass輸出格式;
 31         .pipe( autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0'],remove:false}) )   //自動添加css3前綴;
 32         .pipe( gulp.dest( cssDst ) )  
 33         .pipe(rename({suffix: '.min'}))    //更名;
 34         .pipe(minifycss({"compatibility": "ie7"})) // compatibility 保留iehack 如:'*,_'; 
 35         .pipe( gulp.dest( cssDst ) )
 36         .pipe(notify({ message: 'css task ok' })) 
 37         .pipe( livereload({start:true}) );
 38 });
 39 
 40 //合併css;
 41 gulp.task('cssmin', function() { 
 42     var cssSrc = config.css.src,
 43         cssDst = config.css.dist,
 44         allCss = config.css.dist;  
 45 
 46     /**
 47      * 合併仍是本身寫這個數組,由於合併有時要有順序;
 48      */
 49     gulp.src([cssDst+'index.css',cssDst+'a.css',cssDst+'b.css'])    
 50         .pipe(concat('main.all.css')) 
 51         .pipe(gulp.dest(cssDst))  
 52         .pipe(concat('main.all.min.css'))                            
 53         .pipe(minifycss({"compatibility": "ie7"}))                                    
 54         .pipe(gulp.dest(cssDst))                               
 55 });
 56 
 57 //合併壓縮JS;
 58 var uglify = require('gulp-uglify');
 59 var jshint = require('gulp-jshint');    //提示;
 60 gulp.task('jsmin', function () {
 61     var jsSrc = config.js.src,
 62         jsDst = config.js.dist;
 63 
 64     gulp.src(jsSrc+'*.js')
 65         .pipe(jshint())         
 66         .pipe(jshint.reporter('default'))  // 對代碼進行報錯提示
 67         .pipe(uglify())
 68         .pipe(rename({suffix: '.min'}))    //更名;
 69         .pipe(gulp.dest(jsDst));
 70 });
 71 
 72 //合併壓縮JS;
 73 gulp.task('alljsmin', function () {
 74     var jsSrc = config.js.src,
 75         jsDst = config.js.dist;
 76 
 77     gulp.src([jsSrc+'index.js',jsSrc+'index2.js'])
 78         .pipe(jshint())       // 進行檢查
 79         .pipe(jshint.reporter('default'))  // 對代碼進行報錯提示
 80         .pipe(concat('main.all.js'))
 81         .pipe(gulp.dest(jsDst))
 82         .pipe(uglify())
 83         .pipe(rename({suffix: '.min'}))    //更名;
 84         .pipe(gulp.dest(jsDst));
 85 });
 86 
 87 //實時監聽;
 88 gulp.task('watch',function(){
 89 
 90     var cssSrc = config.css.src;
 91     gulp.watch(cssSrc,['sass']);
 92     livereload.listen({start:true});
 93 
 94 });
 95 
 96 //壓縮圖片 
 97 var imagemin = require('gulp-imagemin');      // 壓縮圖片 $ npm i -D gulp-imagemin;
 98 var pngquant = require('imagemin-pngquant');  // 壓縮圖片 $ npm i -D imagemin-pngquant;
 99 gulp.task('img', function(){
100 
101     var imgSrc = config.img.src,
102         imgDst = config.img.dist;
103 
104     return gulp.src( imgSrc + '*' )
105         .pipe(imagemin({
106             optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
107             progressive: true,    //類型：Boolean 默認：false 無損壓縮jpg圖片
108             interlaced: true,     //類型：Boolean 默認：false 隔行掃描gif進行渲染
109             multipass: true,      //類型：Boolean 默認：false 屢次優化svg直到徹底優化
110             svgoPlugins: [          
111                 {removeViewBox: false}  //不要移除svg的viewbox屬性
112             ],       
113             use: [pngquant({quality: '65-80'})]    //使用pngquant深度壓縮png圖片的imagemin插件/quality 壓縮的比例最好60-80之間;
114         }))
115         .pipe(gulp.dest(imgDst));
116 });
117 
118 //添加引入文件版本號,引入文件後邊補?rev=@@hash;
119 //例子:<link rel="stylesheet" href="c/index.css?rev=@@hash">;
120 var rev = require('gulp-rev-append');
121 gulp.task('rev', function () {
122     gulp.src('*.html')
123         .pipe(rev())
124         .pipe(gulp.dest(''));
125 });
126 
127 //執行的默認事件;
128 gulp.task('default',function(){
129    gulp.run('webserver', 'watch', 'sass');      
130 });

View Code

config.js(其實這個文件是能夠沒有的只不過是爲了輸入輸入的路徑)

 1 module.exports = {
 2     port : 8000,
 3     css : {
 4         all  : '',
 5         src  : './src/scss/*.scss',   //須要編譯的scss;
 6         dist : './c/',   //輸出的scss;
 7     },
 8     img      : {    
 9         src  : './src/img/',  
10         dist : './i/' 
11     }, 
12     js       : {    
13         src  : './src/js/',  
14         dist : './j/' 
15     },
16     html     : {
17         src  : '',
18         dist : ''
19     }
20 
21 }