フロントエンド ビルド ツール gulp は _html/css_WEB-ITnose を使用します

ファイルのマージや圧縮などを行うフロントエンド自動処理ツール

Gulp 公式 Web サイト http://gulpjs.com/

Gulp 中国語 Web サイト http://www.gulpjs.com.cn/

Gulp 中国語ドキュメント https://github.com/lisposter/gulp-docs-zh - cn

Gulp プラグイン ネットワーク http://gulpjs.com/plugins/

Awesome Gulp https://github.com/alferov/awesome-gulp

StuQ-Gulp の実践と原理分析 http://i5ting .github.io/stuq-gulp/

1. gulp 環境をインストールします

1. nodejs をダウンロードしてインストールします

gulp は、node.js を介してインストールする必要があるため、最初にインストールする必要があります。 Nodejs 環境の場合は、英語の公式 Web サイトまたは中国語の Web サイトからダウンロードしてインストールします。

node.js プラグインは、Windows システムの .msi ツールであり、次のステップに進み続ける限り、ソフトウェアは自動的に環境変数に書き込むため、node または npm コマンドを使用できます。 cmd コマンド ウィンドウで直接実行します。 npm の詳細については、記事の最後にある添付ファイルを参照してください。

2. gulp をグローバルにインストールします

まず、nodejs 環境が正しくインストールされていることを確認します。次に、次のコマンドを使用して gulp をグローバルにインストールします。

npm install gulp -g 或者cnpm install gulp -g

cnpm 詳しい紹介は記事末尾の添付ファイルをご覧ください。

2. プロジェクトプロセス

たとえば、私のプロジェクトディレクトリは次のとおりです: E:gulpproject

1. プロジェクトに必要な情報ファイル package.json を生成します

cmd ウィンドウに gulpproject ディレクトリを入力し (添付ファイルを参照)、次のように入力します。コマンド npm init を入力し、Enter を最後まで押します。完了すると、package.json ファイルが自動的に生成されます。

注:「申し訳ありませんが、名前に大文字を含めることはできません」というメッセージが表示される場合があります。これは、プロジェクト名に大文字を含めることができないことを意味します。

2. gulp をプロジェクトのルート ディレクトリにインストールします

gulp をグローバルにインストールした後、gulp を使用するプロジェクトごとに個別にインストールする必要もあります。

コマンドを実行

npm install gulp --save-dev

完了するとnode_modulesフォルダーが生成されます。

3. プロジェクトに必要な自動化プラグインをインストールします

圧縮jsプラグインはgulp-uglify

圧縮画像プラグインはgulp-image

圧縮cssプラグインはgulp-cssnanoです

#安装gulp-uglifynpm install gulp-uglify --save-dev#安装gulp- imagenpm install gulp-image --save-dev#安装gulp-cssnanonpm install gulp-cssnano --save-dev#安装delnpm install del --save-dev 

4. プロジェクトの gulpfile.js を設定します

gulpfile.js は、タスクの設定を含む gulp プロジェクトの設定ファイルです。最も単純な gulpfile.js 構成は次のとおりです。 この構成ファイルはデフォルトのタスクを定義します。

var gulp = require('gulp');gulp.task('default',function(){        console.log('hello world');});

プロジェクトで使用される機能は設定ファイルに追加できます。

私のファイルディレクトリが次のようであると仮定します: E: gulpproject に、圧縮される CSS、画像、JS などを含む新しいプロジェクト 1buy があります。

新しい gulpfile.js を作成し、1buy フォルダーに配置します。

以下は、js、css、画像の圧縮、および少ない関数のコンパイルを含む、私が使用する gulpfile.js 構成です。

var gulp = require('gulp'),    uglify = require('gulp-uglify'),    concat = require('gulp-concat'),    rename = require('gulp-rename'),    cssnano = require('gulp-cssnano'),    image = require("gulp-image"),    del = require('del'),    less = require('gulp-less');//压缩css,压缩后的文件放入dest/cssgulp.task('minifycss', function() {    return gulp.src('css/*.css')               .pipe(cssnano()) //压缩               .pipe(gulp.dest('dest/css'));//输出});//合并并压缩css，合并压缩后的文件放入dest/cssgulp.task('concatminifycss', function() {    return gulp.src('css/*.css')                .pipe(concat('main.css'))    //合并所有css到main.css                //.pipe(gulp.dest('dest/css'))    //输出main.css到文件夹                //.pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(cssnano())//压缩                .pipe(gulp.dest('dest/css'));//输出});//压缩js，压缩后的文件放入dest/jsgulp.task('minifyjs', function() {    return gulp.src('js/*.js')                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});//合并并压缩js，合并压缩后的文件放入dest/jsgulp.task('concatminifyjs', function() {    return gulp.src('js/*.js')                .pipe(concat('main.js'))    //合并所有js到main.js                .pipe(gulp.dest('dest/js'))    //输出main.js到文件夹                .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});//压缩图片，压缩后的文件放入dest/imagesgulp.task('image',function(){    gulp.src('images/*.+(jpg|png|gif|svg)')        .pipe(image())//压缩        .pipe(gulp.dest('dest/images'));//输出});//执行压缩前，先删除dest文件夹里的内容gulp.task('clean', function(cb) {    del(['dest/*'], cb)});//编译less到cssgulp.task("less",function(){    gulp.src('css/*.less')        .pipe(less())        .pipe(gulp.dest("dest/css"));});//监视文件的变化gulp.task("watch",function(){gulp.watch("css/*.less",['less']);});//默认命令，在cmd中输入gulp后，执行的就是这个命令gulp.task('default', function() {    // 将你的默认的任务代码放在这    gulp.start('clean','concatminifycss','image','concatminifyjs');});

各プラグインの具体的な機能については、以下で詳しく紹介します。

5. 圧縮コマンドを実行します

gulp タスクを実行するには、gulpfile.js ファイルが保存されているディレクトリに切り替えて (Windows プラットフォームでは cmd が使用されます)、コマンド ラインで gulp コマンドを実行します。 gulp clean など、gulp タスク名の後に実行するコマンドを追加できます。タスク名が指定されていない場合は、デフォルトのタスク名を持つデフォルトのタスクが実行されます。

3. プラグイン機能の詳細説明（一部使用していない部分あり）

1. グローバル設定 config

gulpfile.js が大きすぎるとメンテナンスが大変になるので、 gulpfile 内で引用符で囲む必要があるパラメーターには、パス、関数スイッチなどが含まれます。例: config.js の内容は次のとおりです:

module.exports = {    name : '.....',    devPath : '.....',    //项目根路径，根路径下可以包含多个项目    prodPath : '....', //生产路径根路径    sassPath : '.....', //SASS包含文件路径    rmHtmlWhitespace : false,//html中是否去除空格    webpackEntry : {        index : 'index.js'//js合并    },    server : {        port : 8088    }};

ここでは、nodejs の構文である module.exports が使用されていることに注意してください。構成は、gulpfile 内の require で参照されます。

//加载项目配置var config = require('./config');

2. 画像の可逆圧縮

gulp-image によって圧縮された画像は、場合によっては 80% 以上圧縮される場合があり、これは非常に優れています。

github アドレス: https://github.com/1000ch/gulp-image

//压缩图片，压缩后的文件放入dest/imagesgulp.task('image',function(){    gulp.src('images/*.+(jpg|png|gif|svg)')        .pipe(image())//压缩        .pipe(gulp.dest('dest/images'));//输出});

3. JS 圧縮とモジュラーマージ

gulp-uglify を使用して js を圧縮し、gulp-concat でマージします。

//压缩js，压缩后的文件放入dest/jsgulp.task('minifyjs', function() {    return gulp.src('js/*.js')                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});//合并并压缩js，合并压缩后的文件放入dest/jsgulp.task('concatminifyjs', function() {    return gulp.src('js/*.js')                .pipe(concat('main.js'))    //合并所有js到main.js                .pipe(gulp.dest('dest/js'))    //输出main.js到文件夹                .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});

以下も実装可能ですが、私は使っていません。

gulpRimraf() は、gulp-rimraf から引用された、フォルダーを削除するために使用されます。

gulp.task('js', function() {    //先删除dist中的css，有时候会不更新    gulp.src('./dist/js/*.js') .pipe(rimraf({force: true})); gulp.src('./js/*.js') .pipe(plumber()) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(gulp.dest('./dist/js')) .pipe(livereload());});

上記の jshint は、セミコロンが書かれていないなど、コードを解析するために使用されます。コマンド「gulp-jshint」を入力します。

モジュラーマージは webpack-stream を使用します。クリックしてドキュメントを表示します。 github にもチュートリアルがあります。

gulp.task('webpack', function(){    var entry = {}; for(var name in config.webpackEntry){ entry[name] = './js/' + config.webpackEntry[name]; } //排除bundle文件 return gulp.src('./js/*[^bundle].js') .pipe(plumber()) .pipe(webpack({ entry: entry, output: { filename: '[name].bundle.js', } })) .pipe(gulp.dest('./js'));});

4. CSS 圧縮とモジュール結合

js に似ています。

//压缩css,压缩后的文件放入dest/cssgulp.task('minifycss', function() {    return gulp.src('css/*.css')               .pipe(cssnano()) //压缩               .pipe(gulp.dest('dest/css'));//输出});//合并并压缩css，合并压缩后的文件放入dest/cssgulp.task('concatminifycss', function() {    return gulp.src('css/*.css')                .pipe(concat('main.css'))    //合并所有css到main.css                //.pipe(gulp.dest('dest/css'))    //输出main.css到文件夹                //.pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(cssnano())//压缩                .pipe(gulp.dest('dest/css'));//输出});

5. gulp.watch を監視します

これは gulp に組み込まれており、ファイルが変更されると、対応するタスクが実行されます。プラグイン gulp-watch もあります。

监控sass中的文件变化，一有变化就做sass的编译。“**”与“*”这种语法可以参考《Gulp：任务自动管理工具》

gulp.task('watch', function() {    livereload.listen();    gulp.watch('**.html', ['html']);    gulp.watch('./sass/*.scss', ['sass']);    gulp.watch('./css/*.css', ['css']);    gulp.watch('./js/*.js', ['js']);});

监控了四个地方的修改，js、html、css和sass，并且有做了自动刷新livereload。这个是通过“gulp-livereload”来实现的。

firefox货chrome要分别安装插件才可运行。chrom插件如下：

安装完后会在浏览器中出现个小按钮，，注意是黑色的时候才是在执行中。还有就是要在相应的task中加相应的代码：

.pipe(livereload())

6、less/sass编译与css压缩

less请参考：gulp编译less

通过sass编写css，能更模块化，多人协作比较方便。安装gulp-sass。“gulpPlumber()”是引用了“gulp-plumber”，任务错误中断自动重传。

gulp.task('sass', function() {    gulp.src('./sass/*.scss')            .pipe(plumber())            .pipe(sass())            .pipe(gulp.dest('./css'))            .pipe(livereload());});

gulp-cssnano，压缩CSS代码。

gulp.task('css', ['sass'], function() {    //先删除dist中的css，有时候会不更新    gulp.src('./dist/css/*.css')        .pipe(rimraf({force: true}));            gulp.src('./css/*.css')        .pipe(cssnano())        .pipe(gulp.dest('./dist/css'))        .pipe(livereload());});

7、html压缩

经过gulp-htmlmin压缩过的html可以缩小很多，可以看到都挤到了一起，有很多参数可以选择，比如去除空格等。

还可以通过gulp-replace来给静态资源文件加个版本号。

gulp.task('html', function() {    gulp.src('*.html')        .pipe(replace('__VERSION', Date.now().toString(16)))        .pipe(htmlmin({collapseWhitespace: true}))        .pipe(gulp.dest('./dist'))        .pipe(livereload());});

8、fontmin字体压缩

网上有很多webfont，例如国外的Font Awesome，国内的iconfont。都能做出漂亮的自定义字体。

与西文字体不同，由于字符集过大，中文字体无法享受 webfont 带来的便利。为了让中文字体也乘上这道风，我们需要对其进行min。使用指令“gulp-fontmin”。

gulp.task('font', function() {    gulp.src('font/*.+(eot|svg|ttf|woff)')      .pipe(fontmin({          text: '人晒'      }))      .pipe(gulp.dest('dist/font'));});

配置的两个字“人晒”与没配置的“国”，明显有区别。

 

9、启动一个本地调试服务器

通过gulp-connect，可以做个server。如果你用notpad++这种开发页面，那这个指令会很有用。

gulp.task('server', function(){    var option = {        root : config.devPath,        port : config.server.port    };    if(config.server.root){        option.root = config.server.root;    }    connect.server(option);});

上面的localhost可以改成本机的IP地址，手机与电脑在同一个网段的话，就可以直接用手机调试了。

10、node_modules目录

node_modules目录中的内容非常大，如果在每个工程下面都安装，会造成很大的浪费。可以将其放在各个工程的公共父级中，而在各个目录下面使用自己的gulpfile.js，config.js等配置文件。

例如工程都在public文件夹中，我就将node_modules放在public的平级。

 

 

 

 

附件

1、npm介绍

npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

gulp赫然出现在npm的首页中。

命令提示符执行：

npm install <name> [-g] [--save-dev]

1. 8a11bc632ea32a57b3e3693c7987c420：node插件名称。例：npm install gulp-less --save-dev

2. -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；

          非全局安装：将会安装在当前定位目录；

全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

3. --save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

4. -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点

配置文件package.json是为了方便下载相关的包，只需要在有这个文件的文件夹下面执行“npm install”（如果安装了cnpm就用“cnpm install”），则会根据package.json下载所有需要的包。

2、cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。

在国内推荐使用淘宝NPM镜像。“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步”

安装指令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意安装的时候会出现错误提示，你可以关闭命令窗口再打开，打入“cnpm -v”可以查看版本号。cnpm跟npm用法完全一致。

 

参考资料

http://javascript.ruanyifeng.com/tool/gulp.html    Gulp：任务自动管理工具

http://www.ghostchina.com/module-exports-and-exports-in-node-js/  Node.js 系列之 —— module.exports 与 exports

前端构建工具gulpjs的使用介绍及技巧

前端自动化构建工具gulp记录

 

 

この記事の著者であるスタロフは、知識自体が変化しているため、著者も常に学習して成長しており、読者の誤解を避け、ソースを追跡しやすくするために、記事の内容も随時更新されます。転載して出典を明記してください: ご質問がございましたら、私と話し合って一緒に進めてください。