如今无论是作前端仍是后端的,不可避免的是要跟html打交道的;并且Node这么容易开发web;难道咱们不想本身随手写点什么?Express这类比较前卫的框架;早就深度集成了不少前端的东西;如今,就让咱们手动为thinkphp也插上gulp的翅膀吧。
在本身的thinkphp项目根目录中建立 package.json;加上如下依赖php
{ "name": "baijunyao/thinkphp-bjyadmin", "version": "1.0.0", "description": "WebLSS博客", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "WebLSS", "博客" ], "author": "baijunyao", "license": "Apache2", "devDependencies": { "babel-preset-es2015": "^6.18.0", "babel-preset-stage-2": "^6.18.0", "browser-sync": "^2.14.0", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "gulp-cleanhtml": "^1.0.1", "gulp-concat": "^2.6.0", "gulp-contrib-copy": "^0.1.2", "gulp-decomment": "^0.1.3", "gulp-imagemin": "^3.0.2", "gulp-less": "^3.1.0", "gulp-load-plugins": "^1.2.4", "gulp-minify-css": "^1.2.4", "gulp-plumber": "^1.1.0", "gulp-rename": "^1.2.2", "gulp-sass": "^2.3.2", "gulp-uglify": "^2.0.0" } }
建立gulpfile.js文件css
/** * Created by WebLss on 2018/8/3 */ var gulp = require('gulp') var sass = require('gulp-sass') var minifyCss = require('gulp-minify-css') var plumber = require('gulp-plumber') var babel = require('gulp-babel') var uglify = require('gulp-uglify') var clearnHtml = require('gulp-cleanhtml') var imagemin = require('gulp-imagemin') var copy = require('gulp-contrib-copy') var browserSync = require('browser-sync').create() var reload = browserSync.reload // 定义源代码的目录和编译压缩后的目录 var src = 'public/src' var dist = 'public/dist' var viewSrc = 'views/src' var viewDist = 'views/dist' // 编译所有scss 并压缩 gulp.task('css', function () { gulp.src(src + '/**/*.scss') .pipe(sass()) .pipe(minifyCss()) .pipe(gulp.dest(dist)) }) // 编译所有js 并压缩 gulp.task('js', function () { gulp.src(src + '/**/*.js') .pipe(plumber()) .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest(dist)) }) // 压缩所有html gulp.task('html', function () { gulp.src(src + '/**/*.+(html|ejs)') .pipe(clearnHtml()) .pipe(gulp.dest(dist)) // 编译视图文件 gulp.src(viewSrc + '/**/*.+(html|ejs)') .pipe(clearnHtml()) .pipe(gulp.dest(viewDist)) }) // 压缩所有image gulp.task('image', function () { gulp.src([src + '/**/*.+(jpg|jpeg|png|gif|bmp)']) .pipe(imagemin()) .pipe(gulp.dest(dist)) }) // 其余不编译的文件直接copy gulp.task('copy', function () { gulp.src(src + '/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html|ejs)') .pipe(copy()) .pipe(gulp.dest(dist)) }) // 自动刷新 gulp.task('server', function () { browserSync.init({ proxy: 'veekergdn.com', // 指定代理url notify: false // 刷新不弹出提示 }) // 监听scss文件编译 gulp.watch(src + '/**/*.scss', ['css']) // 监听其余不编译的文件 有变化直接copy gulp.watch(src + '/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy']) // 监听html文件变化后刷新页面 gulp.watch(src + '/**/*.js', ['js']).on('change', reload) // 监听html文件变化后刷新页面 gulp.watch(src + '/**/*.+(html|ejs)', ['html']).on('change', reload) // 监听css文件变化后刷新页面 gulp.watch(dist + '/**/*.css').on('change', reload) }) // 监听事件 gulp.task('default', ['css', 'js', 'image', 'html', 'copy', 'server'])
把 gulpfile.js 中的src 和 dist 变量替换为本身项目的实际目录;
把proxy 替换为本身的本地自定义域名;
第三步: 命令行运行以下命令:html
cnpm install 或npm install前端
gulp
若是不出意外;会自动编译并打开浏览器了;
很简单吧;就3步;
以项目为例讲解下吧: https://github.com/WebLss/Nod...
运行gulp后;会有以下操做;git
1.src目录下的图片、文件、html、scss都会编译到view_dist目录 2.能够手动设置开发阶段使用src/dist目录的html页面,`product`和`development` 两个状态切换 3.触发监放任务,有文件变更自动执行上述几条任务,而且自动刷新浏览器, 这又是一个一次整合终身受益,不止是终身;换个项目一样能够很方便复用;
估计你们也都看出来了,为何要用gulp编译压缩,无非就是有效利用空间资源,优化加载速度,优化网站性能,提高用户体验感github