Gulp.js 基本入門tutorial_html/css_WEB-ITnose

• プロジェクトフォルダーを作成します

• プロジェクトフォルダーに入ります

• プロジェクトを初期化します

  npm コマンド npm init を使用し、プロンプトに従って完了します。

Gulp をインストールします

プロジェクトフォルダーに入り、Node のパッケージ管理コマンド npm を使用してインストールします。

• インストールグローバル

npm install -g gulp

• プロジェクトの依存関係にインストール

npm install --save-dev gulp

Gulp 設定ファイルを作成します

• プロジェクトのルート ディレクトリに新しい設定ファイル gulpfile.js を作成します

設定情報を設定します

次のように一般的な Gulp プラグインを例に挙げます。

1. js コード検証 (gulp-jshint)
2. js ファイルの統合 (gulp-concat)
3. 圧縮 js コード (gulp-uglify)
4. sass のコンパイル (gulp-sass)
5. less のコンパイル (gulp-less)
6. 圧縮 CSS (gulp- minify-css)
7. 名前の変更 (gulp-rename)

これらのプラグインのインストール コマンドは次のとおりです:

npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev

プロフィール:

// 引入 gulpvar gulp = require('gulp');// 引入组件var jshint = require('gulp-jshint');var concat = require('gulp-concat');var uglify = require('gulp-uglify');var sass = require('gulp-sass');var less = require('gulp-less');var minifycss = require('gulp-minify-css');var rename = require('gulp-rename');// 检查js脚本gulp.task('lint', function() {    gulp.src('./src/js/*.js')        .pipe(jshint())        .pipe(jshint.reporter('default'));});// 合并,压缩js文件gulp.task('scripts', function() {    gulp.src('./src/js/*.js')        //合并js文件        .pipe(concat('all.js'))        //给文件添加.min后缀        .pipe(rename({ suffix: '.min' }))        //压缩脚本文件        .pipe(uglify())        .pipe(gulp.dest('./dist/js'));});// 编译sassgulp.task('sass', function() {    gulp.src('./src/scss/*.scss')        .pipe(sass())        .pipe(gulp.dest('./css'));});// 编译lessgulp.task('sass', function() {    gulp.src('./src/less/*.less')        .pipe(less())        .pipe(gulp.dest('./css'));});// 压缩cssgulp.task('style', function() {    gulp.src('./src/css/*.css')        .pipe(gulp.dest('./dist/style'))        .pipe(rename('all.min.css'))        .pipe(minifycss())        .pipe(gulp.dest('./dist/style'));});// 默认任务gulp.task('default', function(){    gulp.run('lint', 'sass', 'scripts');    // 监听文件变化    gulp.watch('./src/js/*.js', function(){        gulp.run('lint', 'scripts');    });    gulp.watch('./src/sass/*.scss', function(){        gulp.run('sass');    });    gulp.watch('./src/less/*.less', function(){        gulp.run('less');    });    gulp.watch('./src/css/*.css', function(){        gulp.run('style');    });});

この作品はSeayXu によって作成され、クリエイティブ コモンズに帰属します。ShareAlike 4.0 国際ライセンスに基づいてライセンスされています。

http://git.seay.me の作品を元に作成しました。

転載、引用は自由ですが、著者の署名と出典の明記、同様の方法で共有する必要があります。

この記事へのリンク:

Gulp.js の基本的な入門チュートリアル