gulp学習ノート3

gulpシリーズ学習ノート:

1、gulp学習ノート1
2、gulp学習ノート2
3、gulp学習ノート3
4、gulp学習ノート4
 

1、コンパイルsass

SassはCSSの開発ツールであり、多くの便利な書き方を提供し、開発者の時間を大幅に節約し、CSSの開発を簡単かつメンテナンス可能にした.
適切なモジュールをインストールするには、次の手順に従います.

npm install gulp-ruby-sass

gulpfile.jsファイルには、次のコードが記述されています.

/    gulp
var gulp = require('gulp')
//    gulp-ruby-sass   
var sass = require('gulp-ruby-sass')

//   sass
//        gulp sass      
gulp.task('sass', function() {
    return sass('sass/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});

コマンドラインに次のように入力します.

gulp sass

sassフォルダの下にある.sassファイルのコンパイルはdist/cssフォルダの下に配置されます.
 

2、jsコードをチェックする

JSHint(http://www.jshint.com/)はJavaScript構文とスタイルチェックツールで、コードスタイルに関する問題を注意することができます.
同様に、対応するコードも必要です.

npm install gulp-jshint --save-dev

次に、プロファイルに対応するコードを作成します.

//   gulp
var gulp = require('gulp'); 

//   gulp-jshint  
var jshint = require('gulp-jshint');

// jshint     
gulp.task('jshint', function() {
  gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

コマンドラインに次のように入力します.

gulp jshint

次のような出力が表示されます.

[gulp] Using file D:\test\gulpfile.js
[gulp] Working directory changed to D:\test
[gulp] Running 'jshint'...
[gulp] Finished 'jshint' in 8.24 ms
D:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon.

1 error

ここにlibが表示されます.jsのファイルにエラーがあります.それからあなたは修正すればいいです.

3、htmlを圧縮する

トラフィックを節約し、ページのロード速度を向上させるために、htmlも圧縮できます.
適切なモジュールをインストールするには、次の手順に従います.

npm install gulp-minify-html --save-dev

gulpfile.jsファイルには、次のコードが記述されています.

//     
var minifyHTML = require('gulp-minify-html');

// minify new or changed HTML pages
gulp.task('htmlpage', function() {
  gulp.src('./src/*.html')
    .pipe(minifyHTML())
    .pipe(gulp.dest('./dist'));
});

コマンドラインに次のように入力します.

gulp htmlpage

srcフォルダの下にある.htmlファイルをコンパイルしてdistフォルダの下に置きます.
3、

4、修正したファイルのみコンパイル

前のタスクでは、ファイルの1つだけを変更すると、実際にはすべてのファイルが再コンパイルされます.コンパイルされたファイルが多い場合、必要な時間が大幅に増加します.新しいプラグインgulp-changedを使用します.
プラグインのインストール:

npm install --save-dev gulp-changed

ここでは、前の画像圧縮を借りて説明し、コードを記述します.

var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

//      
gulp.task('imagemin', function() {
  var imgSrc = './src/images/**/*',
      imgDst = './dist/images';

  gulp.src(imgSrc)
    //        
    .pipe(changed(imgDst))
    //   
    .pipe(imagemin())
    //   
    .pipe(gulp.dest(imgDst));
});

コマンドラインに次のように入力します.

gulp imagemin

src/imagesフォルダの下の画像をdist/imagesフォルダの下に圧縮します.
 
 
記事は以下の資料を参考にしています.
1、gulp詳細入門チュートリアル:http://www.ydcss.com/archives/18;  
2、gulp APIドキュメント:http://www.gulpjs.com.cn/docs/api/;  
3、gulp入門ガイド:https://github.com/huanshen/gulp-book; 
4、An Introduction to Gulp.js:  https://www.sitepoint.com/introduction-gulp-js/