本地环境下，静态网站的构建自动化
vim编辑器工作以来使用了两年多，早已熟悉每一个命令。工作之余，打算在本地制作一个线下网站环境。所以我想到了在本地构建关系，并通过gulp打包输出。
目录设计如下：
整个过程是：安装nodejs，全局安装gulp，项目安装gulp以及gulp插件，配置gulpfile.js，运行任务
全局安装gulp插件
$ npm install gulp -g
本地路径
创建模块，package.json 文件是必不可少的。我们可以使用 NPM 生成 package.json 文件，生成的文件包含了基本的结果.
$ npm init
本地安装gulp插件
$ npm install gulp gulp-less gulp-uglify imagemin-pngcrush
gulp-imagemin gulp-html-extend —save-dev //对less的输出，js的压缩，图片压缩，html的处理
全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件功能
$ vim gulp.js
修改gulp.js文件
var gulp = require('gulp'),
less = require('gulp-less'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),//图片压缩
pngcrush = require('imagemin-pngcrush'),
htmlHelper = require('gulp-html-extend'); //主要处理公用部分layout
var dir = '../event/'; //定义目录
gulp.task('testLess', function() {
gulp.src(dir+'web/*/*/*.less')
.pipe(less())
.pipe(gulp.dest(dir+'output'));
console.log('done css');
})
gulp.task('minify-js', function() {
gulp.src(dir+'web/*/*/*.js')
//.pipe(uglify()) //开发环境下不压缩js
.pipe(gulp.dest(dir+'output'));
})
gulp.task('img', function() {
return gulp.src(dir+'web/*/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(dir+'output'));
});
gulp.task('testHtml', function() {
gulp.src(dir+'web/*/*.html').pipe(htmlHelper({
annotations:false,verbose:false
})).pipe(gulp.dest(dir+'output'))
})
gulp.task('default', function() {
gulp.run('testLess','minify-js','testHtml','img');
gulp.watch(dir+'web/*/*/*.less',['testLess'])
gulp.watch(dir+'web/*/*/*.js',['minify-js'])
gulp.watch(dir+'web/*/*.html',['testHtml'])
gulp.watch(dir+'web/*/images/*',['img'])
})
使用gulp命令运行打包程序
$ gulp
layout.html 使用了bootstrap框架
页面引用(注意使用output路径,按需引入资源)
源码查看
