node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

front-end-gulp-pattern

front-end-gulp-pattern

gulp-cli wrapper with own read-only gulpfile for front-end.

Provides own gulp-cli binary as font-end-gulp.

Should be configured by package.json.

Usage

  1. Create package.json file in root of your project;

  2. You should set "dependencies", "postinstall" script and "gulp" hash for your front-end-gulp tasks;

  3. Minimal example of package.json:

```json
{
  "dependencies": {
    "front-end-gulp-pattern": "^1"
  },
  "scripts": {
    "postinstall": "./node_modules/.bin/front-end-gulp --production"
  },
  "gulp": {
    "distclean": [
      "./node_modules"
    ]
  }
}
```
  1. After npm install front-end-gulp will do nothing, but you can run:
```
./node_modules/.bin/front-end-gulp distclean
```
to remove `node_modules` directory;
  1. If you're using git then you should add node_modules to .gitignore;
  2. --production flag will minify styles and scripts;
  3. Also you can use it with web-front-end-deploy as git-submodule, do it in root of your project:
```bash
$ git submodule add https://github.com/unclechu/web-front-end-deploy
$ ln -s ./web-front-end-deploy/deploy.sh
$ mkdir _deploy
$ cd _deploy
$ ln -s ../web-front-end-deploy/tasks/11-front-end-gulp-pattern_symbolic_link.sh
$ ln -s ../web-front-end-deploy/tasks/13-front-end-gulp-pattern_default_tasks.sh
$ cd ..
```

And set <i>"postinstall"</i> key in key <i>"scripts"</i> of `package.json` to: "./deploy.sh".
`13-front-end-gulp-pattern_default_tasks.sh` will do:
```
./node_modules/.bin/front-end-gulp --production
```
And `11-front-end-gulp-pattern_symbolic_link.sh` will create symbolic link `front-end-gulp` to `./node_modules/.bin/front-end-gulp` in root of your project. In this case you should add `front-end-gulp` to `.gitignore` and to <i>"distclean"</i>:

```json
{
  "dependencies": {
    "front-end-gulp-pattern": "^1"
  },
  "scripts": {
    "postinstall": "./deploy.sh"
  },
  "gulp": {
    "distclean": [
      "./node_modules",
      "./front-end-gulp"
    ]
  }
}
```
  1. Structure of definition of all tasks in "gulp" key (except "distclean"):
...
"task-type"{
  "own-group-name1": {
    // params
  },
  "own-group-name2": {
    // params
  }
}
...

To be continued...

Supported tasks types

  1. Sprites (spritesmith);
  2. Styles:
  3. Stylus;
  4. Less.
  5. Scripts:
  6. Browserify (transforms supported, you can use LiveScript, CoffeeScript, etc.)

License

GNU/GPLv3