這又是一個一次整合終身受益;不止是終身;換個項目一樣能夠很方便複用;不信你看另外一個項目: thinkphp整合系列之gulp實現前端自動化php
{ "name": "baijunyao/thinkphp-bjyadmin", "version": "1.0.0", "description": "博客", "main": "index.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1" }, "keywords": [ "白666", "博客" ], "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" } }
var gulp = require('gulp'), sass = require('gulp-sass'), minifyCss = require('gulp-minify-css'), plumber = require('gulp-plumber'), babel = require('gulp-babel'), uglify = require('gulp-uglify'), clearnHtml = require("gulp-cleanhtml"), imagemin = require('gulp-imagemin'), copy = require('gulp-contrib-copy'), browserSync = require('browser-sync').create(), reload = browserSync.reload; // 定義源代碼的目錄和編譯壓縮後的目錄 var src='tpl_src', dist='tpl'; // 編譯所有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|tpl)') .pipe(clearnHtml()) .pipe(gulp.dest(dist)); }); // 壓縮所有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|tpl)') .pipe(copy()) .pipe(gulp.dest(dist)); }); // 自動刷新 gulp.task('server', function() { browserSync.init({ proxy: "tbjyadmin.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|tpl)", ['html']).on("change", reload); // 監聽css文件變化後刷新頁面 gulp.watch(dist+"/**/*.css").on("change", reload); }); // 監聽事件 gulp.task('default', ['css', 'js', 'image', 'html', 'copy', 'server'])
# 安裝各類包 cnpm install # 運行gulp gulp