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)