gulpfile in 10 lines? Easy! - we simplify the creation of standard tasks
Recently, in almost any project, you need to build less / sass / css / js / html, etc. files. Gulp is an excellent solution for these tasks, it is a breath of air after grunt, but it is not perfect either.
For example, if you need to build common js using browserify, you need to connect with a dozen dependencies and write almost 50 lines of code. Here is one example .
')
It is necessary to simplify gulpfile.js
When you create a new project, you have to install 50+ lines of code from dozens of npm modules each time and drag 50+ lines of code from a project to a project, which is very inconvenient and in passing you can break / forget something in the thread if the developer did not read the code that drags and changes .
As a result, a solution was born in the form of the gulp-easy npm module, which makes life better. The module has accumulated “cases” that were encountered in each of our projects:
As a result, typical tasks can be reduced to this type:
This code creates the following tasks for gulp:
And if tasks go beyond the compilation of js and css code, then you can add your own task:
Which copies all files from the images directory to the public / images2 directory and subscribes to the file changes in the source code.
A detailed description of all available methods can be seen in the githaba documentation.
Indeed, the gulp-easy module was written for its needs. But it is likely that you have similar typical tasks or you will fork and implement your tasks in a similar style. So this solution should be useful to someone.
As an experiment and my own development, I wrote this module in the es6 style - using classes, inheritances and import / export. On node.js, it runs with the help of babel (yes, Node.js 4.0.0 supports some things from es6, but not all — for example, there are no import / export constructs) —who are interested, see the sources .
With any wishes you can write in a personal or email - affka@affka.ru
Have a great time of day!
For example, if you need to build common js using browserify, you need to connect with a dozen dependencies and write almost 50 lines of code. Here is one example .
')
It is necessary to simplify gulpfile.js
Problem
When you create a new project, you have to install 50+ lines of code from dozens of npm modules each time and drag 50+ lines of code from a project to a project, which is very inconvenient and in passing you can break / forget something in the thread if the developer did not read the code that drags and changes .
Decision
As a result, a solution was born in the form of the gulp-easy npm module, which makes life better. The module has accumulated “cases” that were encountered in each of our projects:
- Each gulp file has two tasks on its output: default for the developer and production for releases in production.
- In production mode, compression is turned on, and in developer mode, a “watch” of changes is included and a sourcemap is added.
- The most popular compilations are common js -> bundle and less -> css
- Errors that occur during compilation (in watch mode) must be suppressed so that the process does not die imperceptibly.
- For css and js files it would be nice to always create gzip
- The base source directory and the publication directory are usually moved to the configuration.
As a result, typical tasks can be reduced to this type:
require('gulp-easy')(require('gulp')) .config({ dest: 'app/public' }) .less(['less/header.less', 'less/main.less'], 'style.css') .js('js/index.js', 'app/public/lib/main.js') This code creates the following tasks for gulp:
- Combines and compiles less files less / header.less , less / header.less to css file app / public / style.css . The base directory is specified in the configuration.
- Compiles common js code from js / index.js to app / public / lib / main.js.
- Subscribes to change the source and performs the appropriate tasks when they change.
And if tasks go beyond the compilation of js and css code, then you can add your own task:
require('gulp-easy')(require('gulp')) // ... .task(function(gulp, taskName, isCompress, isWatch) { gulp.src(['images/*']).pipe(gulp.dest('public/images2/')); }, function(gulp, taskName, isCompress) { gulp.watch(['images/*'], [taskName]); })
Which copies all files from the images directory to the public / images2 directory and subscribes to the file changes in the source code.
A detailed description of all available methods can be seen in the githaba documentation.
Che for ... (and who needs it?)
Indeed, the gulp-easy module was written for its needs. But it is likely that you have similar typical tasks or you will fork and implement your tasks in a similar style. So this solution should be useful to someone.
Bonus
As an experiment and my own development, I wrote this module in the es6 style - using classes, inheritances and import / export. On node.js, it runs with the help of babel (yes, Node.js 4.0.0 supports some things from es6, but not all — for example, there are no import / export constructs) —who are interested, see the sources .
With any wishes you can write in a personal or email - affka@affka.ru
Have a great time of day!
Source: https://habr.com/ru/post/267471/
All Articles