前几周做了公司官网项目，由于要seo友好，所以用了比较老的技术（也不是老只是没框架）兼容IE8，真的是要人命啊
言归正传
具体用的技术架构
js+html+css+gulp
所以说一下gulp一些配置
1、首先，需要node的环境如果没有的话需要安装一下
2、全局安装gulp
npm install --global gulp3、在项目初始化
npm init也可以直接创建一个package.json文件
向内添加
4、
npm install5、作为项目的开发依赖安装：
npm install --save-dev gulp6、编写Gulp配置 创建gulp的config文件
gulpfile.js以下是我用到package.json文件
{
"name": "xxx",
"version": "1.1.0",
"description": "xxx",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "gulp build",
"dev": "gulp dev"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"del": "^5.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^7.0.1",
"gulp-cache": "^1.1.3",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.2.0",
"gulp-connect": "^5.7.0",
"gulp-file-include": "^2.1.1",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^1.4.0",
"gulp-uglify": "^3.0.2",
"imagemin-pngquant": "^8.0.0",
"run-sequence": "^2.2.1"
},
"dependencies": {}
}
7、gulpfile.js配置
var gulp = require("gulp");
var babel = require('gulp-babel');//转ES6
var concat = require('gulp-concat'), //合并文件
var gulpHtmlMin = require('gulp-htmlmin');//html压缩
var gulpCssMin = require('gulp-clean-css');
var rename = require('gulp-rename');
var gulpJsmin = require('gulp-uglify'); //js压缩
var gulpImgsmin = require('gulp-imagemin');//图片压缩
var pngquant = require('imagemin-pngquant');
var connect = require('gulp-connect');// 启动服务
var autoprefixer = require('gulp-autoprefixer'); //补全浏览器前缀
var fileinclude = require('gulp-file-include');
var cache = require('gulp-cache');
var sequence = require('run-sequence');//整合模块
var clean = require('gulp-clean');
var rev = require('gulp-rev') //版本控制
function revJs() {
src(jsSrc).pipe(rev()).pipe(rev.manifest()).pipe(dest('./rev/js'))
}
function revCss() {
src(cssSrc).pipe(rev()).pipe(rev.manifest()).pipe(dest('./rev/css')) }
function revHtml() {
return src(['rev/**/*.json', 'src/**/*.html']).pipe(revCollector()).pipe(dest('src'))
}
//资源文件跨域配置
var cors = function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
};
//引入压缩html所需的模块
gulp.task('htmlmin', function () { //可以单个压缩
//[ './a/**/*,'!./a/{test,test/**}']
return gulp.src(['src/**/*.html', '!src/{plugins,plugins/**}'])
.pipe(gulpHtmlMin({ //删除空格
collapseWhitespace: true, //删除注释
removeComments: true
}))
.pipe(gulp.dest('dist/')).pipe(connect.reload())
});
gulp.task('fileinclude', function() {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
gulp.src(['src/**/*.html', '!src/**/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/'));
});
可以引入公共的头部文件跟footer 文件，在打包的时候直接打进去不会影响加载问题，但是如果本地运行只是监听了此变化并没有打包，所以在本地加载的时候没有加载上此插件//后续还会持续研究
gulp.task('cssmin', function () {
return gulp.src(['src/css/*.css', '!src/{plugins,plugins/**}'])
.pipe(gulpCssMin())
.pipe(autoprefixer({
//自动给加浏览器前缀
overrideBrowserslist: [
'last 2 versions',
'Android >= 4.0',
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
cascade: true, //是否美化属性值 默认：true 像这样：
remove:true //是否去掉不必要的前缀 默认：true
}))
.pipe(gulp.dest('dist/css')).pipe(connect.reload())
});
gulp.task('jsmin', function () { //注意，js中可能有多个文件夹，比如说一些插件一些类库之类的,
return gulp.src(['src/js/*.js', '!src/{plugins,plugins/**}'])
.pipe(babel())
.pipe(gulpJsmin({ mangle: { toplevel: true } }))
.pipe(gulp.dest('dist/js')).pipe(connect.reload())
});
gulp.task('imagesmin', function () {
gulp.src('src/img/**/*')
// .pipe(cache(gulpImgsmin({
// progressive: true,
// svgoPlugins: [{removeViewBox: false}],
// use: [pngquant()]
// })))
.pipe(gulp.dest('dist/img'));
});
//创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Task
gulp.task('watch', function () {
gulp.watch('./src/page/*.html', ['htmlmin', 'fileinclude']);
// gulp.watch('./src/component/*.html', ['htmlComMin']);
gulp.watch('./src/js/*.js', ['jsmin']);
gulp.watch('./src/css/*.css', ['cssmin']);
gulp.watch('.src/img/**/*', ['imagesmin']);
});
//使用connect启动一个Web服务器
gulp.task('connect', function () {
connect.server({
root: 'src',
liveload: true,
port: 3003,
});
});
gulp.task('dev', ['watch', 'connect']);
当gulp dev或者npm run dev的时候会打包启动本地服务器并且监听watch 文件变化
清除任务
gulp.task("clean", function (cb) {
return gulp.src('dist', {
read: false
})
.pipe(clean({
force: true
}));
})
gulp.task('build', function () {
sequence('clean',
['htmlmin', 'fileinclude', 'cssmin', 'jsmin', 'imagesmin'],
function () {
});
});
gulp 中
使用gulp-webserver模块
也可以启动服务器
var webserver =require('gulp-webserver');
gulp.task('webserver',function(){
gulp.src('./')
.pipe(webserver({
host:'localhost',
port:3002,
livereload:true, //自动刷新
directoryListing:{
enable: true,
path:'./'
},
}));
});8、注 gulp中主要用到的方法
gulp.src 文件源位置
gulp.task 构建任务名和函数
gulp.dest 放置文件位置
gulp.watch 监控9、注 IE8中打包Es6转ES5会报错误如果你用了 [...]的话
会报assgin(）等错误
如果需要兼容IE8
"babel-preset-stage-2": "^6.24.1",转换以此支持
在.babelic中配置