node package manager

gulp-tasks-build

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 分支