Complete gulp Development Guide => change your grunt.

Recently, angular applications have been built, and frontend package dependencies are managed through Bower, and then cooperated with angular applications through gulp. we found that gulp is really light compared to grunt, And Now grunt has been replaced in my project. here I will record some of my practices and share them with you.

Gulp positioning is also a front-end build tool like grunt. Compared with grunt, it highlights the concept of a stream. All of its task execution is one by one. The official website's customization is:

 

Gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

 

First of all, I think it is much less important than grunt. It is relatively simple to use and can satisfy our needs at the same time. Here, I will explain how to use gulp through a real project configuration file.

npm install -g gulp

Install locally in your project

npm install --save-dev gulp

The two installation methods are free of charge.

(2) Run

Create a "gulpfile. js" file in the directory and run the gulp command.

(3) gulpfile. JS File

This is a complete example. It has been used in my project and added comments. After reading the entire file, you should have understood and can use gulp.

VaR gulp = require ('gulp'); // introduce the component VaR less = require ('Gulp-less '), // less minifycss = require ('Gulp-Minify-CSS '), // css compression uglify = require ('Gulp-uglify '), // JS compression Concat = require ('Gulp-concat'), // merge file rename = require ('Gulp-rename '), // rename clean = require ('Gulp-clean'); // clear the folder // less parse gulp. task ('Build-less ', function () {gulp. SRC ('. /javis/static/less/lib/s-production.less '). pipe (less ()). pip E (gulp. deST ('. /javis/static/build/CSS/lib/') gulp. SRC ('. /javis/static/less/lib/s-skins.less '). pipe (less ()). pipe (gulp. deST ('. /javis/static/build/CSS/lib/') gulp. SRC ('. /javis/static/less/lib/S. less '). pipe (less ()). pipe (gulp. deST ('. /javis/static/build/CSS/lib/') gulp. SRC ('. /javis/static/less /*. less '). pipe (less ()). pipe (gulp. deST ('. /javis/static/build/CSS/')}); // merge, compress, and rename cssgulp. task ('style Sheets ', ['Build-less'], function () {// release file, but it is added before !, This is similar to the. gitignore method. It is to exclude this file. Gulp. SRC (['./javis/static/build/CSS/*. CSS ','!. /Javis/static/build/CSS/areamap.css ']) .pipe(concat('all.css ')). pipe (gulp. deST ('. /javis/static/build/CSS /')). pipe (Rename ({Suffix :'. min '})). pipe (minifycss ()). pipe (gulp. deST ('. /javis/static/build/CSS ');}); // merge and compress the JS file gulp. task ('javascripts', function () {gulp. SRC ('. /javis/static/JS /*. js '). pipe (Concat ('all. js ')). pipe (gulp. deST ('. /javis/static/build/js ')). pipe (Rename ({Suffix :'. min '})). pipe (uglify ()). pipe (gulp. deST ('. /javis/static/build/js');}); // clear the image, style, and jsgulp. task ('clean', function () {return gulp. SRC (['. /javis/static/build/CSS/all.css ','. /javis/static/build/CSS/all.min.css '], {read: false }). pipe (clean ({force: true}) ;}); // maps the bower library file to the specified location gulp. task ('buildlib ', function () {gulp. SRC ('. /bower_components/Angular/angular. min. js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/Angular/angular. js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/Bootstrap/Dist/JS/Bootstrap. min. js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/jquery/Dist/jquery. min. js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/Angular-route/angular-route.min.js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/Angular-animate/angular-animate.min.js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/Angular-Bootstrap/ui-bootstrap.min.js '). pipe (gulp. deST ('. /javis/static/build/JS/') gulp. SRC ('. /bower_components/Angular-Bootstrap/ui-bootstrap-tpls.min.js '). pipe (gulp. deST ('. /javis/static/build/JS/') // ---------------------------- CSS ----------------------------------------- gulp. SRC ('. /javis/static/less/fonts /*'). pipe (gulp. deST ('. /javis/static/build/CSS/fonts/') gulp. SRC ('. /bower_components/Bootstrap/fonts /*'). pipe (gulp. deST ('. /javis/static/build/CSS/fonts/') gulp. SRC ('. /bower_components/Bootstrap/Dist/CSS/bootstrap.min.css '). pipe (gulp. deST ('. /javis/static/build/CSS/lib ')}); // defines the use of gulp in daily development of the develop task. task ('develop', function () {gulp. run ('buildlib', 'Build-less ', 'javascripts', 'stylesheets'); gulp. watch ('. /javis/static/less /*. less ', ['Build-less']) ;}); // defines a prod task to use gulp for release or running. task ('prod', function () {gulp. run ('buildlib ', 'Build-less', 'stylesheets ', 'javascripts'); // listen. if the file is less, call the build-less task to execute gulp immediately. watch ('. /javis/static/less /*. less ', ['Build-less']) ;}; // The default startup of the gulp command is default. Here, the clean task is used as the dependency, that is, execute the clean task first and then proceed. gulp. task ('default', ['clean'], function () {gulp. run ('develop ');});

I personally feel that if grunt is used, it is not difficult to see it. Even if nothing is used, I can probably know what it means.

The above uses gulp to achieve less parsing, merge, compress, rename JS and CSS files, as well as file listening and cleanup. note that you need to manually install the above require plug-ins on NPM. For details about the plug-ins and their corresponding installation, refer to the plugin section on the official website, which is very simple and detailed. only some common ones are listed here.

 

Gulp-ruby-sass: sass supported
Gulp-Minify-CSS: compressing CSS
Gulp-jshint: Check JS
Gulp-uglify: compressing JS
Gulp-Concat: Merge files
Gulp-Rename: rename a file
Gulp-htmlmin: compressing html
Gulp-clean: clear folders

 

The final attachment of the official website: http://gulpjs.com/

If you find any problems, please leave a message to me.

 

Http://www.tuicool.com/articles/J3QnEb

Complete gulp Development Guide => change your grunt.