基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子，回头过来看了看从最初的项目配置到开发的过程，总有些感慨，疲软期，正好花点时间，看看最初的配置情况
随着前端的发展，前端工程化慢慢成为业内的主流方式，项目开发的各种构建工具，也出现了不少，如：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也好，不管是什么工具，适合自己的，适合团队的，适合项目的，或许才是最好的，要结合开发现状和团队等等因素，就像我们开发的时候，要考虑技术选型一样重要
