Ionic study notes three gulp in ionic

Brief introduction

Gulp is a stream-based automation builder.

Installation

Set Registry http:///registry.npm.taobao.org  ---Best with domestic source npm Install--- Save-dev Gulp

Create File Gulpfile.js

var gulp = require ('gulp'); Gulp.task ('default')  , function () {  // Place code for your The default taskhere});

Run

Gulp

Installing plugins

sudo npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin Gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache gulp-ng-annotate Yargs--save-dev

Function Description:

Compile sass (gulp-ruby-Sass) autoprefixer (Gulp-autoprefixer) Zoom Out (minify) CSS (gulp-minify-CSS) Jshint (Gulp-jshint) splicing (Gulp-concat)smear (uglify) (Gulp-uglify) image compression (gulp-imagemin)  -- This plugin may have some problems with real-time reorganization (Livereload) (Gulp-livereload) cleanup file (Gulp-clean) picture cache, Compressed (gulp-cache) Change notification (Gulp-notify) only if the picture is changed

More Plugins list: http://gratimax.github.io/search-gulp-plugins/

Jshint Plugin Basic usage:

var jshint = require (' Gulp-jshint '); var gulp   = require (' Gulp '); Gulp.task (function() {  return Gulp.src ('./lib/*.js ')    . Pipe (Jshint ())    . Pipe (Jshint.reporter (' your_reporter_here '));});

Compare the whole usage:

function () {    return gulp.src (' src/scripts/**/*.js ')    . Pipe (Jshint ('. Jshintrc ')) . Pipe (    jshint.reporter (' Default ')). Pipe (    concat (' main.js '))    . Pipe (Gulp.dest ( ' Dist/assets/js    '))    . Pipe (Uglify ())    . Pipe (Gulp.dest (' dist/ Assets/js ')    ) ("Scripts Task Complete ')}) ;

Using Gulp in Ionic projects

Ionic itself with Gulp, whose script is under the generated Project Ionic directory.

The original content is as follows:

varGulp = require (' Gulp '));varGutil = require (' Gulp-util '));varBower = require (' bower '));varConcat = require (' Gulp-concat '));varSass = require (' Gulp-sass '));varMinifycss = require (' gulp-minify-css '));varRename = require (' Gulp-rename '));varSH = require (' Shelljs ');varpaths ={sass: ['./scss/**/*.scss ']};gulp.task (' Default ', [' sass ']); Gulp.task (' Sass ',function(done) {GULP.SRC ('./scss/ionic.app.scss '). Pipe (Sass ({errlogtoconsole:true}). Pipe (Gulp.dest ('./www/css/') . Pipe (Minifycss ({keepspecialcomments):0}). Pipe (rename ({extname):'. Min.css '}). Pipe (Gulp.dest ('./www/css/'). On (' End ', done);}); Gulp.task (' Watch ',function() {Gulp.watch (Paths.sass, [' Sass ']);}); Gulp.task (' Install ', [' Git-check '],function() {  returnBower.commands.install (). On (' Log ',function(data) {Gutil.log (' Bower ', Gutil.colors.cyan (data.id), data.message); });}); Gulp.task (' Git-check ',function(done) {if(!sh.which (' Git ') {Console.log (' + gutil.colors.red (' Git is not installed. ')),      ' \ n Git, the version control system, is required to download Ionic. ',      ' \ n Download git here: ', Gutil.colors.cyan (' http://git-scm.com/downloads ') + '. ',      ' \ n Once git is installed, run \ ' + Gutil.colors.cyan (' Gulp install ') + ' \ ' again. '    ); Process.exit (1); } done ();});

First, add gulp to the project. The following commands are written separately, or you can merge a one-time installation.

NPM Install--save-Dev gulpnpm Install gulp-util--save-devnpm Install brow--save-devnpm Install Bower--save-devnpm Install Gulp-concat--save-devnpm Install Gulp-sass--save-devnpm Install Gulp-minify-css--save-devnpm Install Gulp-rename--save-devnpm Install Shelljs--save-devnpm Install Gulp-jshint--save-devnpm Install Gulp-uglify--save-devnpm Install Gulp-notify--save-devnpm Install Gulp-minify-html--save-devnpm Install Gulp-imagemin--save-devnpm Install Gulp-cache--save-Dev npm Install gulp-cond--save-devnpm Install Yargs--save-devnpm Install Gulp-ng-annotate--save-dev

Determine the compilation method based on conditions

Gulp-cond

gulp-Imagemin encounters a problem with the handling of No path specified! Can not get relative. Need to add a sentence:

Gulp.task (' img ',function() {gulp.src (Extensarray ([' png ', 'jpg ',' gif ')). Pipe ($.filter ( ' *. {jpg,jpeg,svg,gif,png} ') //Add this sentence. Pipe (Cache (Imagemin {optimizationlevel: 3, Progressive: true, Interlaced: true})). Pipe (Gulp.dest (Target_path)); });

    GULP.SRC ("*.js")      . PIPE (Cond (Is_release, uglify ({compress:false}))      . PIPE ( Gulp.dest (Target_path+path.js));

Receive command line arguments: gulp.env

Gulp--key 111--value 222

Value of gulp.env:

Gulp.env: {_: [], key:111, value:222}

Gulp.env is obsolete and can be used Yargs

NPM Install Yargs--save-dev

Use:

var argv = require (' Yargs '). Argv;gulp.task (' My-task ', function () {    return gulp.src (ARGV.A = = 1) options. Scss_source:options. Other_source). Pipe (        sass ({style: ' nested ')). Pipe (        autoprefixer (' last Version '))        . Pipe (Concat (' Style.css ')        . Pipe (Gulp.dest) (options. scss_dest);});

Determine if a file exists

var fs = require (' FS ');

function (err, stat) {    ifnull) {        console.log (' input parameter is wrong. Error code: ', Err.code);        Process.exit (0);     Else  {    }});

Ionic study notes three gulp in ionic