项目上线也有一阵子，回头过来看了看从最初的项目配置到开发的过程，总有些感慨，疲软期，正好花点时间，看看最初的配置情况
随着前端的发展，前端工程化慢慢成为业内的主流方式，项目开发的各种构建工具，也出现了不少，如：grunt,gulp,webpack，百度团队的fis3等，在前端的领域都占有自己的一席之地，webpack可以说是后起之秀，加之vuejs，reactjs，angularjs等MVVM框架的出现，配合webpack开发，成为业内常见的一种开发模式
在公司项目开发的时候，选用了gulp+webpack进行配合开发，正好写写总结算是复习吧
gulp传送门 ：——> gulp中文网
——> gulp官网
webpack官网：——> webpack中文网
——> webpack官网
在官网可以学习最基础的基本配置，在网上也可以找到一些大神的分享
gulp的思想是基于流的思想，进行构建工具，类似管道的结构，由于gulp是基于node，所以在开发进行配置之前，首先要安装nodejs才能进行配置
进入到项目的根目录，在根目录下执行命令行命令初始化项目：
npm init
在项目的根目录，我们可以看到会出现一个名为：package.json的文件，是整个项目的项目信息清单
同时在项目根目录下新建一个gulpfile.js文件，开始配置gulp文件
一些gulp的基本语法结构，可以在gulp的api文档中可以查找到 -->gulp中文api文档
其中包括gulp常使用的关键字：src,dest,watch,pipe,task等
准备工作做好之后，开始进行配置：
gulp:
需要先全局安装gulp
npm install gulp -g
完成之后，在配置项目中安装gulp
npm install gulp --save-dev
需要注意的是，在后面添加 --sav-dev，才能将安装的gulp的信息，添加到package.json清单文件当中
安装完成之后，在配置文件gulpfile.js中引入gulp模块
var gulp = require('gulp');
sass:
在sass的配置的时候，首先要全局安装基于ruby的sass编译环境，在命令行中要安装:
npm install ruby -g npm install gulp-sass -g npm install gulp-sass
安装完成之后，开始配置gulp中sass的配置
var sass = require("gulp-sass"); //编译sass
// gulp-sass
var sassSrc = [
'./src/styles/style.scss'
];
//新建编译sass文件的gulp任务
gulp.task('sass',function(){
return gulp.src(sassSrc)
.pipe(sass()).pipe( gulp.dest( './klm/styles/' ) );
});
webserver:
基于gulp还可以配置前端自己本地的服务器，在后端没有开发接口出来之前，可以自己配置mock数据
配置代码如下：
//mockApi
//配置mock数据的路径
var mockbase = path.join(__dirname, './mock');
var mockApi = function(res, pathname, paramObj, next) {
switch (pathname) {
case '/api/vote':
var data = fs.readFileSync(path.join(mockbase, 'classify.json'), 'utf-8');
res.setHeader('Content-Type', 'application/json');
res.setHeader('Content-type', 'application/javascript');
res.end(data);
// console.log(typeof data);
// console.log(paramObj.callback);
return ;
default:
}
next();
};
gulp.task('webserver', function () {
gulp.src( './' ) // 服务器目录（./代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload:true, // 启用LiveReload
port:1000,
// open: true // 服务器启动时自动打开网页
//middleware为处理数据的中间件
middleware: function(req, res, next) {
var urlObj = url.parse(req.url, true),
method = req.method,
paramObj = urlObj.query;
// mock数据
mockApi(res, urlObj.pathname, paramObj, next);
}
}));
});
webpack:
gulp还可以结合webpack对js组件进行按需加载，webpack对于js模块化的开发思想，有着很强的支持，和gulp结合可以相互弥补，解决很多相互之间的补足之处，
webpack作为近两年前端项目构建工具的后起之秀，到成为主流，和行业的发展离不开，学习webpack使用到项目当中，能提高开发效率等,webpack官网有着详细的入门教程，
需要学习的同学，可以在上面的官网传送门，到官网去学习
// 要进行自动化的文件
var jsFiles = [
'./src/scripts/entry.js'
];
gulp.task("packjs",function(){
return gulp.src(jsFiles)
.pipe(webpack({
//插件项
// plugins: [
// new HtmlWebpackPlugin({
// title: 'jquery',
// filename: './jquery.js'
// })
// ],
//输入
entry: {
app:jsFiles //文件引入路径
},
output: {
path:"", //输出路径
// publicPath: 'http://mycdn.com/', //cdn
filename: 'bundle.js'
},
// 新添加的module属性
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
// vue加载器
// {test: /\.vue$/,loader: 'vue'},
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{test: /\.html$/, loader: 'html'}
]
},
//其它解决方案配置
resolve: {
root: 'E:/akari丶/workspace/gulp-webpack', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
// AppStore : 'js/stores/AppStores.js',
// ActionType : 'js/actions/ActionType.js',
// AppAction : 'js/actions/AppAction.js'
}
}
}))
//输出路径
.pipe(gulp.dest('./klm/js'));
});
同时，在安装多个模块的时候，我们可以类似这样的安装：
npm install gulp gulp-sass webpack --save-dev
下面这些是我自己自己的配置文件:
var gulp = require('gulp');
var concat = require('gulp-concat'); //文件管道
var stripDebug = require('gulp-strip-debug'); //调试工具
var uglify = require('gulp-uglify'); //丑化
var autoprefix = require('gulp-autoprefixer'); //浏览器内核名称前缀
var minifyCSS = require('gulp-minify-css'); //压缩css
var connect = require('gulp-connect'); //服务器连接
var livereload = require('gulp-livereload'); // 网页自动刷新（服务器控制客户端同步刷新）
var webserver = require('gulp-webserver'); // 本地服务器
var jshint = require('gulp-jshint'); //检测js是否存在错误
var sass = require("gulp-sass"); //编译sass
var named = require('vinyl-named'); //重新命名
var webpack = require('gulp-webpack'); //js模块打包
var cssmin = require('gulp-cssmin'); //压缩css
var imagemin = require("gulp-imagemin"); //图片压缩
var url = require("url"); //node.js url模块
var fs = require("fs"); //node.js 文件模块
var path = require("path"); //node.js 路径模块
var coffee = require('gulp-coffee');
var base64 = require("gulp-base64"); //base64
var gutil = require("gutil"); //
//image min
gulp.task('imagemin', function () {
gulp.src('./src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./klm/images/'));
});
//mockApi
var mockbase = path.join(__dirname, './mock');
var mockApi = function(res, pathname, paramObj, next) {
switch (pathname) {
case '/api/vote':
var data = fs.readFileSync(path.join(mockbase, 'classify.json'), 'utf-8');
res.setHeader('Content-Type', 'application/json');
res.setHeader('Content-type', 'application/javascript');
res.end(data);
// console.log(typeof data);
// console.log(paramObj.callback);
return ;
default:
}
next();
};
gulp.task('webserver', function () {
gulp.src( './' ) // 服务器目录（./代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload:true, // 启用LiveReload
port:1000,
// open: true // 服务器启动时自动打开网页
//middleware为处理数据的中间件
middleware: function(req, res, next) {
var urlObj = url.parse(req.url, true),
method = req.method,
paramObj = urlObj.query;
// mock数据
mockApi(res, urlObj.pathname, paramObj, next);
}
}));
});
// gulp-sass
var sassSrc = [
'./src/styles/style.scss'
];
gulp.task('sass',function(){
return gulp.src(sassSrc)
.pipe(autoprefix('last 2 versions'))
.pipe(sass()).pipe( gulp.dest( './klm/styles/' ) );
});
// CSS concat, auto-prefix and minify
var styleSrc = [
'./klm/styles/styles.css'
];
gulp.task('styles', function() {
gulp.src(styleSrc)
.pipe(concat('styles.css'))
.pipe(cssmin())
.pipe(minifyCSS()) //可以使用外部工具进行实现：编辑器插件
.pipe(gulp.dest('./klm/styles/'));
// .pipe(autoprefix('last 2 versions'));
});
// 要进行自动化的文件
var jsFiles = [
'./src/scripts/entry.js'
];
gulp.task("packjs",function(){
return gulp.src(jsFiles)
.pipe(webpack({
//插件项
// plugins: [
// new HtmlWebpackPlugin({
// title: 'jquery',
// filename: './jquery.js'
// })
// ],
//输入
entry: {
app:jsFiles //文件引入路径
},
output: {
path:"", //输出路径
// publicPath: 'http://mycdn.com/', //cdn
filename: 'bundle.js'
},
// 新添加的module属性
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
// vue加载器
// {test: /\.vue$/,loader: 'vue'},
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{test: /\.html$/, loader: 'html'}
]
},
//其它解决方案配置
resolve: {
root: 'E:/akari丶/workspace/gulp-webpack', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
// AppStore : 'js/stores/AppStores.js',
// ActionType : 'js/actions/ActionType.js',
// AppAction : 'js/actions/AppAction.js'
}
}
}))
//输出路径
.pipe(gulp.dest('./klm/js'));
});
// default gulp task
gulp.task('default', ['packjs',"styles",'sass','webserver',"imagemin"], function() {
// watch for scss changes
var watchSass = [
'./src/**/*.scss',
'./src/styles/*.scss'
];
gulp.watch(watchSass, function() {
gulp.run('sass');
});
// watch for CSS changes
gulp.watch('./src/styles/*.css', function() {
gulp.run('styles');
});
// watch for JS changes
var watchJs = [
'./src/scripts/**/*.js',
'./src/scripts/*.js'
];
gulp.watch(watchJs, function() {
// gulp.run('jshint', 'scripts');
gulp.run('packjs');
});
// watch for html changes
// gulp.watch("./src/page/*.html",function(){
// gulp.run("html");
// });
});
值得一提的是，在命令行中编译执行gulp的时候，在命令行直接输入gulp回车，就可以执行gulp配置中default默认执行的gulp任务了，同时，watch里面所监控的文件，在文件发生改动的时候，就是执行相应的任务
之前上传过一份简单的配置在githup里面，有需要的童鞋可以下载看一下 -->gulp基本配置仓库地址，
由于在工作中开发的时候，并不需要和后端进行数据对接，只是简单的html模板的编写，所以并不需要很复杂的gulp配置，不足之处，请在评论中指出，请多指教~
不管是gulp也好，webpack也好，不管是什么工具，适合自己的，适合团队的，适合项目的，或许才是最好的，要结合开发现状和团队等等因素，就像我们开发的时候，要考虑技术选型一样重要