利用gulp搭建快速静态页面开发项目

创建monitor目录, 在monitor目录下新建static目录用于存放静态资源，里面包含以下目录和文件 目录cssscssjsfontsimg文件.babelrc、.eslintrc、gulpfile.js、package.json修改配置文件内容

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-es": "^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": ["es"]}复制代码

.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,// 压缩HTMLcollapseBooleanAttributes: 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,// 压缩页面JSminifyCSS: 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转es5、压缩、合并、重命名、热更新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']);复制代码

操作说明： 执行npm install后，最终static目录下的文件结构如下表:gulp构建安装包说明:命令行执行构建命令 monotor/static目录下启动命令行，执行: gulp

如果执行成功，即可看到打包后的目录dist; 下面是本项目打包后的完整目录:

在浏览器访问： http://localhost:10000/即可看到此时的页面效果； 编辑css\html\js可实时浏览页面效果; 此时环境搭建已经告一段落;

其实操作就4步：

创建目录编写配置文件(参考上面文件内容)安装node依赖包(在配置好package.json文件的基础上 npm install)执行gulp命令(gulp)