首页 > 代码库 > Ionic学习笔记三 Gulp在ionic中的使用

Ionic学习笔记三 Gulp在ionic中的使用

2024-08-24 17:50:26   220人阅读

简介

Gulp是一个基于流的自动化构建器。

安装

npm config set registry http://registry.npm.taobao.org  ---最好用国内源
npm install -g gulp
npm install --save-dev gulp

创建文件 gulpfile.js

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // place code for your default task here
});

运行

gulp

安装插件

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

功能说明：

编译Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)  --这个插件实际使用中可能会有一些问题
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

更多插件清单：http://gratimax.github.io/search-gulp-plugins/

jshint插件基本用法：

var jshint = require(‘gulp-jshint‘);
var gulp   = require(‘gulp‘);

gulp.task(‘lint‘, function() {
  return gulp.src(‘./lib/*.js‘)
    .pipe(jshint())
    .pipe(jshint.reporter(‘YOUR_REPORTER_HERE‘));
});

比较全的用法：

gulp.task(‘scripts‘, 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(rename({suffix: ‘.min‘}))
    .pipe(uglify())
    .pipe(gulp.dest(‘dist/assets/js‘))
    .pipe(notify({ message: ‘Scripts task complete‘ }));
});

Ionic 项目中使用gulp

ionic本身带了gulp，其脚本在生成的项目ionic目录下。

原始内容如下：

var gulp = require(‘gulp‘);
var gutil = require(‘gulp-util‘);
var bower = require(‘bower‘);
var concat = require(‘gulp-concat‘);
var sass = require(‘gulp-sass‘);
var minifyCss = require(‘gulp-minify-css‘);
var rename = require(‘gulp-rename‘);
var sh = require(‘shelljs‘);

var paths = {
  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() {
  return bower.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();
});

首先，在项目加入gulp。下面命令是分开写的，也可以合并一次性安装。

npm install --save-dev gulp
npm install gulp-util --save-dev
npm install brow --save-dev
npm install bower --save-dev
npm install gulp-concat --save-dev
npm install gulp-sass --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-rename --save-dev
npm install shelljs --save-dev
npm install gulp-jshint --save-dev
npm install gulp-uglify --save-dev
npm install gulp-notify --save-dev
npm install gulp-minify-html --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-cache --save-dev  
npm install gulp-cond --save-dev
npm install yargs --save-dev
npm install gulp-ng-annotate  --save-dev

根据条件判断编译方式

gulp-cond

 

gulp-imagemin遇到的一个问题的处理 
No path specified! Can not get relative. 
需要加一句：

gulp.task(‘img‘,function(){ gulp.src(extensArray([‘png‘,‘jpg‘,‘gif‘])) .pipe($.filter(‘*.{jpg,jpeg,svg,gif,png}‘)) //加这一句 .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));

接收命令行参数：

gulp.env

gulp --key 111 --value 222

gulp.env的值：

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

 

gulp.env已经过时，可使用yargs

npm install yargs --save-dev

使用：

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 10 version‘))
        .pipe(concat(‘style.css‘))
        .pipe(gulp.dest(options.SCSS_DEST));
});

 

判断文件是否存在

var fs = require(‘fs’);
fs.stat(file, function (err, stat) {
    if (err != null) {
        console.log(‘输入的参数错误。错误代码：‘, err.code);
        process.exit(0);
    } else {
    }
});

 

Ionic学习笔记三 Gulp在ionic中的使用


联系
我们