ionic开发介绍之Gulp介绍一

最新推荐文章于 2021-06-01 18:52:09 发布

robert_cysy

最新推荐文章于 2021-06-01 18:52:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ionic 文章标签： ionic 开发 gulp

本文链接：https://blog.youkuaiyun.com/robert_cysy/article/details/53583457

Ionic 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Ionic项目中使用Gulp进行自动化任务管理，包括安装步骤、配置方法及常用命令，如编译SCSS文件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文只是简单的简绍。适用于刚刚开发ionic项目的同学学习了解

参考：http://www.cnblogs.com/2050/p/4198792.html

gulp是一个前端构建工具

基本使用方法：

确保安装了nodejs，然后执行以下命令安装gulp

Npm install –g gulp

全局安装完成gulp后，还需要在使用gulp的项目目录里再次单独安装一次。使用命令

Npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：

npm install --save-dev gulp

对于ionic里的模板里，package.json已经包含了对gulp的依赖项目。只要在之前执行过npm install 就已经在本地目录安装好了gulp。

开始使用gulp

Gulp依靠gulpfile.js文件来执行具体的工作。在ionic模板里默认的gulpfile.js内容如下:

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())
    .on('error', sass.logError)
    .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', ['sass'], 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();
});

Gulpfile.js默认包括四个命令，分别是 default，sass，watch，git-check。

Gulp在ionic项目里的主要作用是编译，压缩，等一系列处理的工作。最终形成一个可以使用的网站目录。使用gulp的时候，只需要在在项目的目录下即有gulpfile.js的目录下执行

Gulp 命令即可完成 default指定的命令。如果要执行gulpfile.js里的其他命令可以通过加相应的参数，比如：

gulp sass 执行sass命令，用于编译scss文件成为scss（包括ionic自带scss文件及自定义的）

gulp watch 执行watch命令执行观察，命令，执行后实时同步修改内容到展示内容

gulp 执行默认命令，即default命令