基于流的自动化构建工具------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也好，不管是什么工具，适合自己的，适合团队的，适合项目的，或许才是最好的，要结合开发现状和团队等等因素，就像我们开发的时候，要考虑技术选型一样重要