Napolean Paced Mischeviously

    gulp-tasks-build

    0.1.0 • Public • Published

    gulp-tasks

    收集开发常用的 tasks 任务列表,汇总成 gulp-tasks-build

    基于 amazeui-gulp-tasks 的结构,综合常用的 tasks 任务列表汇总而成,让 Coding 更 Happy !。

    问题

    痛苦的安装,每一个项目引用,都要 install 这个东东,并且编译依赖,好慢啊,而且明显的有点浪费,本来只需要安装一次就行了啊。 应该提供一种方式,比如我安装到全局,但在项目中可以引用,这样就方便了。

    所以要使用一种能自动 require('全局模块') 的方式给项目引用,我最先想到的是在想使用的地方,使用npm link到local。

    //这个配置待定下,上次使用的配置,忘记了,改天再整理下
    #在项目开发目录,使用软链接 ln –s 源文件 目标文件(这个效果不好,貌似缺了某些依赖,运行不起来)
    ln -s /usr/local/lib/node_modules/require-global ./node_modules/require-global
    ln -s /usr/local/lib/node_modules/gulp ./node_modules/gulp
    ln -s /usr/local/lib/node_modules/run-sequence ./node_modules/run-sequence
    ln -s /usr/local/lib/node_modules/gulp-tasks-build ./node_modules/gulp-tasks-build
    
    //我是要开发修改的,不安装全局了(sass 每次编译好慢)
    ln -s ~/github/webcoding/gulp-tasks ./node_modules/gulp-tasks-build
    
    ### 我想到可以install 一个模块去加载全局的模块,于是发现了 require-global
    npm install -g require-global
    
    
    browser-sync browserify browserify-shim del derequire gulp gulp-autoprefixer gulp-cache gulp-concat gulp-csso gulp-eslint gulp-gh-pages gulp-git gulp-header gulp-if gulp-imagemin gulp-less gulp-load-plugins gulp-md5-plus gulp-minify-html gulp-nodemon gulp-plumber gulp-rename gulp-replace gulp-sftp gulp-shell gulp-size gulp-sourcemaps gulp-stylus gulp-uglify gulp-util gulp-zip lodash markit-json object-assign require-dir run-sequence vinyl-buffer vinyl-source-stream watchify
    

    如果不用显式的运行,如果全局安装有,自动去查询加载就好了。

    在网上也发现已经有这样的需求,weakish 回答可以尝试使用 autod,这个是什么鬼,通过项目文件引用自动生成依赖,貌似不合适。

    Task list

    gulp clean  //洗刷刷,重新来!
    gulp copy   //copy 项目依赖文件到编译目录,如字体,外部依赖的 css/js
    gulp html   //copy 项目 html 到编译目录
    
    gulp styles //编译样式,根据配置类型,可编译 less sass 或 stylus
    gulp browserify //编译 JS,编译 CommonJS 格式的模块
                styles 和 browserify,在开发环境通过 map 调试,生成环境其引用会追加版本号
    gulp server //开发预览服务器
                开发环境使用:gulp dev
                生产使用:NODE_ENV=production gulp
    

    TODO list

    使用 webpack 形式组织及打包文件?

    这里不集成了,因为 webpack 打包的独立性,独自汇总一个使用示例项目,参见 webpack-tools

    rename.js  //重命名脚本,可集成编译或copy 的任务流中,完成指定重命名
    replace.js //自定义替换脚本,可集成编译或copy 的任务流中,完成指定内容的替换
    gulp uglify  //压缩/丑化 task,待定(编译处已处理)
    gulp jshint //JS 格式校验(暂未使用)
    gulp images  //对样式中图片进行处理(暂未使用)
                   gulp-imagemin + imagemin-pngquant 或 gulp-tinypng 形式
    gulp publish //发布项目
    gulp upload  //上传文件到远程 FTP 服务器
    gulp zip     //打包 build 后的项目
    gulp markdown //编译 markdown 文件,生成文档
    gulp help    //输出此 gulp-tasks 的帮助
    

    本项目测试及效果体验

    下载安装
    git clone https://github.com/webcoding/gulp-tasks.git
    npm install
    bower install   //引入的外界依赖,如 normalize.css pure.css react 等
    
    运行
    gulp dev 或者 NODE_ENV=production gulp
    

    安装及使用

    $ npm install gulp-tasks-build --save-dev
    

    gulpfile.js 中调用任务:

    // gulpfile.js
     
    'use strict';
     
    var gulp = require('gulp');
    var tasks = require('gulp-tasks-build');
    var runSequence = require('run-sequence');
     
    // 项目配置
    var projectConfig = {
      projectName: 'tests',   //项目名称,可用于打 zip 包
      srcRoot: 'tests',       //项目源目录
      distRoot: 'dist'        //编译输出目录
    };
     
    // Task配置
    var config = {
      projectName: projectConfig.projectName,
      srcRoot: projectConfig.srcRoot,
      distRoot: projectConfig.distRoot,
     
      styles: {
        type: 'sass', //编译类型 less sass 或 stylus
        src: projectConfig.srcRoot + '/scss/style.scss', //也可以是数组
        autoPrefixer: [],  //autoPrefixer 配置,如果为空,则按项目内部默认值设定
        dist: projectConfig.distRoot + '/css',
        watches: projectConfig.srcRoot + '/**/*.scss',
        banner: false
      },
    };
     
    tasks(gulp, config);
     
    gulp.task('build', function(cb) {
      //根据你的需求,选择需要的 tasks 任务,别忘了配置
      runSequence('clean', ['html', 'browserify', 'styles'], cb);
    });
     
    // 不要直接使用 gulp.task('dev', ['build', 'server']);
    // build 和 server 没有先后执行顺序,可能时序错乱,建议如下使用
    gulp.task('dev', function(cb) {
      runSequence('build', 'server', cb);
    });

    autoPrefixer 默认配置

    var autoPrefixer = [
      'ie >= 9',
      'ie_mob >= 10',
      'ff >= 30',
      'chrome >= 34',
      'safari >= 7',
      'opera >= 23',
      'ios >= 7',
      'android >= 2.3',
      'bb >= 10'
    ];
    

    任务及配置说明

    styles

    编译 styles。配置如下:

    var config = {
      styles: {
        type: 'less', // 编译类型 less sass 或 stylus(gulp-sass 安装编译超级慢)
        src: './tests/less/test.less', // 源文件
        autoPrefixer: {}, // autoprefixer 设置,
        dist: './dist/css', // 部署目录
        watches: '', // watch 的文件,如果不设置则 watch `src` 里的文件
        banner: false // 是否添加 banner,布尔值或者 {template: '', data: {}}
      }
    }

    browserify

    使用 Browserify 打包 JS。

    var isProduction = process.env.NODE_ENV === "production";
    var config = {
      browserify: {
        bundleOptions: {
          entries: './tests/js/app.js',
          debug: !isProduction
          cache: {},
          packageCache: {}
        },
        filename: 'app.js',
        transforms: [
          ['browserify-shim', {global: true}]
        ],
        plugins: [],
        dist: 'dist/js',
        banner: false
      },
    }

    uglify

    var config = {
      uglify: {
        src: './tasks/*.js',
        dist: './dist',
        banner: false
      }
    }

    markdown 还未启用

    var config = {
      md: {
        src: ['README.md'],
        data: {
          pluginTitle: 'Gulp Tasks for happyCoding',
          pluginDesc: 'gulp-tasks-build 让 Coding 更 Happy!!!'
        },
        // gulp-rename 设置
        rename: function(file) {
          file.basename = file.basename.toLowerCase();
          if (file.basename === 'readme') {
            file.basename = 'index';
          }
          file.extname = '.html';
        },
        dist: function(file) {
          if (file.relative === 'index.html') {
            return 'dist'
          }
          return 'dist/docs';
        }
      },
    }

    clean

    清理任务:

    var config = {
      clean: '' // 要清理的文件夹
    };

    server

    开发预览服务器:编译开发预览、编译生产代码、发布到生产

    gulp dev
    NODE_ENV=production gulp build
    gulp publish
    

    release 还未启用

    发布任务:

    • publish:tag - 添加 tag 并 push 到远程 git 仓库
    • publish:npm - 发布到 NPM
    • publish:docs - Push 文档到 GitHub gh-pages 分支

    Install

    npm i gulp-tasks-build

    DownloadsWeekly Downloads

    4

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • cloudyan