Gulp老矣 尚能飯否

利用gulp搭建快速靜態頁面開發項目

1. 建立monitor目錄, 在monitor目錄下新建static目錄用於存放靜態資源，裏面包含如下目錄和文件

• 目錄 css scss js fonts img
• 文件 .babelrc 、.eslintrc、gulpfile.js、package.json

2. 修改配置文件內容

package.json 文件最終內容

{
  "name": "demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.5.0",
    "gulp-eslint": "^5.0.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-image": "^4.4.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-scss": "^1.4.0",
    "gulp-uglify": "^3.0.1",
    "gulp-util": "^3.0.8"
  },
  "dependencies": {
    "node-sass": "^4.11.0"
  }
}


複製代碼

.babelrc 文件最終內容

{
	"presets": ["es2015"]
}

複製代碼

.eslintrc文件內容

{
    "rules":{
       "camelcase": 1,
        "comma-dangle": 2,
        "quotes": 0
    }
}
複製代碼

// gulpfile.js文件最終內容

let gulp 		= require('gulp');
let sass 		= require('gulp-sass');
let babel 		= require('gulp-babel');
let uglify 		= require('gulp-uglify');
let minifyCSS 	= require('gulp-clean-css');
let autoprefixer= require('gulp-autoprefixer');
let concat 		= require('gulp-concat');
let connect 	= require('gulp-connect');
let gutil 		= require('gulp-util');		// 基礎工具包
let rename		= require('gulp-rename');	// 文件重命名
let image 		= require('gulp-image'); 	// 優化圖片
let eslint 		= require('gulp-eslint');	// js代碼檢查
let htmlmin 	= require('gulp-htmlmin');


const DEST_BASE_URL = '../dist';  			// 設置打包後目錄

gulp.task('default', function(){
	console.log('default task!');
});

// 啓動熱更新服務器
gulp.task('connect', function(){
	connect.server({
		root: '../dist',					// 指定熱更新目錄地址(相對於當前文件)
		livereload: true,					// 開啓熱更新
		port: 10000							// 指定端口號,默認爲8080,請注意修改
	});
});


// html任務: 壓縮HTML、熱更新(修改後即時更新頁面)、輸出到目標目錄
gulp.task('html', function(){
    var options = {
        removeComments: true,								// 清除HTML註釋
        collapseWhitespace: true,							// 壓縮HTML
        collapseBooleanAttributes: true,					// 省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,						// 刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,					// 刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,				// 刪除<style>和<link>的type="text/css"
        minifyJS: true,										// 壓縮頁面JS
        minifyCSS: true										// 壓縮頁面CSS
    };


	gulp.src('../*.html')
		.pipe(connect.reload())
		.pipe(htmlmin(options))
		.pipe(gulp.dest(DEST_BASE_URL));
});


// css任務: scss編譯爲css並壓縮、自動前綴補全、熱更新
gulp.task('css', function() {
	// do somethings （作什麼事情）
  	gulp.src('./scss/*.scss')									// 匹配 'src/scss/*.scss'文件 *表明全部的
	    .pipe(sass.sync().on('error', sass.logError))
	    .pipe(minifyCSS())
	    .pipe(autoprefixer({browsers: 'last 2 versions'}))		// 自動前綴補全, 若是border-radius {} 會補全爲 -webkit-border-radius {} ....
	    .pipe(gulp.dest(`./css/`))
		.pipe(gulp.dest(`${DEST_BASE_URL}/static/css`))
		.pipe(connect.reload());							// 寫入 'dist/css/somefile.js' 跟src目錄下的.scss文件同名
	
});


// js任務: Es6轉es五、壓縮、合併、重命名、熱更新
gulp.task('js', function(){
	// do somethings （作什麼事情）
	gulp.src('./js/*.js')
		.pipe(eslint())											// 語法檢查
		.pipe(babel())
		.pipe(concat('main.js'))
		.pipe(uglify({ mangle: false }))
		.pipe(rename('main.min.js'))							// 重命名
		.pipe(gulp.dest(`./js/`))						
		.pipe(gulp.dest(`${DEST_BASE_URL}/static/js`))
		.pipe(connect.reload());
	
});

// 圖片任務:用於優化圖片輸出到目標目錄
gulp.task('img', function(){
	gulp.src('./img/*.*')
		.pipe(image())											// 對圖片進行優化
		.pipe(gulp.dest(`${DEST_BASE_URL}/static/img`));
});


// 自動執行任務
gulp.task('auto', function(){
	// 監視文件，而且能夠在文件發生改動時候作一些事情(此處可自動監視scss代碼的變化並實時的轉爲css)
	gulp.watch('../*.html', ['html']);
	gulp.watch('./scss/*.scss', ['css']);
	gulp.watch('./js/*.js', ['js']);
});



gulp.task('default', ['html', 'css', 'js', 'img', 'auto', 'connect']);

複製代碼

3. 操做說明： 執行npm install後，最終static目錄下的文件結構以下表:

文件名	描述
static/.babelrc	babel配置文件，用來將es6轉爲es5(類似的工具還有像gulp、webpack..)
static/.eslintrc	js代碼檢查工具eslint配置文件
static/gulpfile.js	項目打包工具gulp的配置文件
static/package.js	node包管理工具配置文件
static/map_modules	地圖操做相關js文件
static/node_modules	項目中依賴包目錄
static/scss	css預編譯語言，按模塊化編寫方式書寫，經過打包工具生成css文件； 經過scss編寫可實現模塊化、提升代碼複用率和編寫代碼速度
static/fonts	用於存放項目中用到的字體圖標文件
static/img	用於存放項目中用到的圖片(特指css中用到的和ico圖標)
static/css	用於存放樣式表文件
static/libs	用於存放第三方庫, 好比jquery、 bootstrap、 arcgis sdk等
static/js	用於存放公共js文件

• gulp構建安裝包說明:

包名	描述
gulp-sass	sass/scss編譯
gulp-babel	將ES6語法編譯爲es5語法
gulp-uglify	壓縮 Javascript代碼
gulp-clean-css	壓縮 CSS
gulp-autoprefixer	自動前綴補全
gulp-concat	將多文件合併到一塊兒
gulp-connect	本地起一個websocket服務，實時刷新瀏覽器
gulp-util	基礎的工具
gulp-rename	文件重命名
gulp-image	優化圖片
gulp-eslint	js代碼錯誤校驗
gulp-htmlmin	HTML代碼壓縮

4. 命令行執行構建命令 monotor/static目錄下啓動命令行，執行: gulp

   

   若是執行成功，便可看到打包後的目錄dist; 下面是本項目打包後的完整目錄:

   

在瀏覽器訪問： http://localhost:10000/便可看到此時的頁面效果； 編輯css\html\js可實時瀏覽頁面效果; 此時環境搭建已經告一段落;

其實操做就4步：

• 建立目錄
• 編寫配置文件(參考上面文件內容)
• 安裝node依賴包(在配置好package.json文件的基礎上 npm install)
• 執行gulp命令(gulp)