Gulp制作写Demoガジェット
10349 ワード
Gulpは今までほど使われていないので、複雑なアプリケーションは書かない.今回は簡単なDemo処理ツールを書きますが、PSDをHTMLに変換する際に、重複操作を減らすためです.
Demoを書くときは、ページの構造や対応するスタイルにしか関心がないので、jsに関する内容は考えません.主に以下の機能点を実現します.
これらの小さな目標のために、以下ではこれらの機能点を徐々に実現し始めます.
使用するGulpバージョンは
3.9.1 . 準備作業
パッケージを作成します.json :
$ npm init -yプロジェクトの開発依存としてGulpをインストールするには:
$ yarn add gulp -Dプロジェクトが開始される前に、まずディレクトリ構造を構築する必要があります.
.
├── gulpfile.babel.js gulp
├── package.json
├── src Demo
│ ├── common ， html
│ │ ├── flexible.min.js
│ │ └── reset.css
│ ├── css
│ │ ├── _none.scss
│ │ └── useful.scss
│ ├── html
│ │ └── index.html
│ └── imgs
│ └── test.png
├── task
│ ├── task-clean.js dist
│ ├── task-css.js css
│ ├── task-default.js
│ ├── task-html.js html
│ └── task-img.js
└── yarn.lockgulpfile.jsでES 6をサポート
gulpfile.jsでES 6関連文法を使うにはgulpfile.jsをgulpfileに変更する.babel.js.ファイル名を変更した後、ES 6のコードをファイルに書き込みます.
import gulp from 'gulp';
gulp.task('default', () => console.log(123));コマンドを実行した後、エラーが発生したことに気づきました.
$ ./node_modules/.bin/gulp
[14:15:34] Failed to load external module @babel/register
[14:15:34] Failed to load external module babel-register
[14:15:34] Failed to load external module babel-core/register
[14:15:34] Failed to load external module babel/registerこのエラーは、ES 6構文を使用すると、タスクを正常に実行するにはbabelを介してトランスコードする必要があるため、babel関連のコンテンツを構成します.
まずbabelをインストールする必要がある依存性です.
$ yarn add babel-cli babel-preset-env -Dbabelが実行される場合は、そのプロファイルの情報を読み出し、対応するコードを翻訳する必要があります.したがって、
.babelrcのファイルは少なくない必要があります.{
"presets": ["env"]
}Gulpコマンドを再実行すると、エラーがまだ発生していることがわかります.
$ ./node_modules/.bin/gulp
[14:20:33] Failed to load external module @babel/registerこのエラーはおかしいですね.名前にはbabelがインストールされています.なぜこのエラーがあるのでしょうか.これは、解析
.babel.jsファイルでbabelコンポーネントのロードが正しくないためです.babel-core/registerはもう時代遅れで、今はbabel-registerを使って代用しています.この問題を修正するにはnode_を修正する必要があります.modulesのinterpretモジュールのindex.js.module: '@babel/register'をmodule: 'babel-register'に変更します.具体的な変更の場所は、次のコードの3行目です. '.babel.js': [
{
module: '@babel/register',gulpfile.babel.jsでは、taskディレクトリの下のファイルをこのプロファイルにロードします.このときに使用するモジュールは
require-dirです.プロジェクトに
require-dirモジュールをインストールします.$ yarn add require-dir -Dモジュールが完了するとgulpfileを改造する.babel.js.
import requireDir from 'require-dir';
requireDir('./task');ターゲットディレクトリの削除
一般的に、最終的に生成されたファイルをdistディレクトリに入れると、ターゲットディレクトリがdistになります.
フォルダまたはファイルを削除するには、一般的に
delモジュールが使用され、このモジュールは非同期メソッドでPromiseオブジェクトを返します.// ./task/task-clean.js
gulp.task('clean', () => {
return del('./dist').then(paths => {
// paths 0，
if (paths.length) {
console.log(paths + ' ')
} else {
console.log(' ');
}
});
});上のコードで作成したcleanタスクは、タスクcleanを実行するときにdistディレクトリを削除できます.
画像の処理
画像の処理は比較的簡単で、画像を圧縮して対応するディレクトリにコピーするだけでよい.圧縮画像に使用されるモジュールは
gulp-imageminである.gulp.task('imgs', () => {
return gulp.src([
'./src/imgs/*.jpg',
'./src/imgs/*.png',
'./src/imgs/*.gif',
'./src/imgs/*.svg'
], {
base: 'src'
})
.pipe(imagemin())
.pipe(gulp.dest('./dist'));
});上記のコードで作成したimgsタスクは、タスクimgsを実行する際に、
./src/imgsの内容を./dist/imgsに圧縮してコピーすることができます.htmlの処理
htmlファイルを処理するときは、少し複雑になります.圧縮と置換にかかわるからです.htmlの内容を置き換える場合、使用するモジュールは
gulp-replaceです.htmlファイルを圧縮する必要がある場合は、gulp-htmlminを使用する必要があります.ここではhtmlにflexibleを導入する代わりに置換する必要がある.jsの場所が対応する内容であれば、以下のように書く必要があります.
.pipe(replace('', () => {
// flexible.min.js
let flexibleData = fs.readFileSync(path.resolve(__dirname, '../src/common/flexible.min.js'));
// ，
return `
${flexibleData} 同時にcssを初期化するスタイルもhtmlファイルに注入され、このときhtmlの対応するパスを対応するファイル内容に置き換えます.
.pipe(replace('', () => {
// reset.css
let flexibleData = fs.readFileSync(path.resolve(__dirname, '../src/common/reset.css'));
// ，
return ``;
}))対応するファイルの置換が完了すると、htmlファイルのすべてのコメント情報を削除する必要があります.
.pipe(htmlmin({
collapseWhitespace: false, // ， false，
removeComments: true //
}))最後に、対応するhtmlファイルを対応するフォルダにコピーします.完全なタスクコードは次のとおりです.
gulp.task('html', () => {
return gulp.src('./src/html/*.html', {
base: 'src'
})
.pipe(replace('', () => {
// flexible.min.js
let flexibleData = fs.readFileSync(path.resolve(__dirname, '../src/common/flexible.min.js'));
// ，
return `
${flexibleData} 処理スタイル
スタイルファイルの処理は相対的に複雑です.以下の機能点を実装する必要があります.
gulp.src(['./src/css/*.scss', '!./src/css/_*.scss'], {
base: 'src'
})はい.scssファイルは翻訳され、生成されたcssファイルはコメントを削除しません.コメント情報はpxがremに変換されるときに使用されるからです.変換中に使用されるモジュールは
gulp-sassである. .pipe(sass({
outputStyle: 'compact' // sass ，
}))pxを対応するremに変換するには、2つのモジュール
gulp-postcssおよびpostcss-px2remに依存する必要がある.postcss-px2remは、コアの変換モジュールである. .pipe(postcss([px2rem({
remUnitpx2rem: 75 // // px rem， 75， 75px/75=1rem
})]))次にcssの互換処理を行い、属性にブラウザの接頭辞を追加することができます.ブラウザプレフィックスを自動的に追加するモジュールは
gulp-autoprefixerです. .pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'] //
}))ページのラベルとラベルのセレクタのプロパティに基づいて、スタイルを簡略化します.主にpostcssのプラグイン
postcss-uncssを使用してスタイルを簡素化するが、postcss-uncssモジュールはuncssモジュールに依存するため、この2つのモジュールはインストールする必要がある.インストールが完了すると、コンパクトスタイルのコードを設定できます. .pipe(postcss([uncss({ //
html: ['./src/**/*.html']
})]))次はcssのソートと圧縮です.ソートcssプロパティで使用されるモジュールは
gulp-csscombであり、圧縮cssで使用されるモジュールはgulp-cssnanoである. .pipe(csscomb()) // CSS
.pipe(cssnano()) // CSS
.pipe(gulp.dest('./dist'));デフォルトタスク
デフォルトのタスクでは、まずタスクの実行順序をシーケンス化します.タスクを実行するたびにdistディレクトリを削除し、html css imgsタスクを実行します.この場合、
gulp-sequenceモジュールを使用してタスクの実行順序を定義します.タスクの順序実行を実現するには、各タスクにストリームを返すか、コールバック関数を呼び出す必要があります.そうしないと、実行順序が正常ではありません.gulp.task('build', gulpSequence('clean', ['html', 'css', 'imgs']));コード変更を実現するには、ブラウザが自動的にリフレッシュするには、
browser-syncモジュールを使用します.gulp.task('default', ['build'], () => {
//
browserSync({
server: {
baseDir: './dist'
},
}, (err, bs) => {
console.log(bs.options.getIn(["urls", "local"]));
});
// ，
gulp.watch('src/html/*.*', ['html']);
gulp.watch('src/css/*.*', ['css']);
gulp.watch('src/imgs/*.*', ['imgs']);
});デフォルトのタスクを実行した後、コードを変更しても、ブラウザがリフレッシュされていることは見つかりません.
$ ./node_modules/.bin/gulpこれは、各タスクにブラウザのリフレッシュが通知されていないため、各タスクにストリームを追加して変更するには、ブラウザのリフレッシュを通知します.
.pipe(browserSync.reload({ //
stream: true
}))
.pipe(gulp.dest('./dist'));使用
./node_modules/.bin/gulp "scripts": {
"gulp": "gulp"
}このときコマンドラインでコマンドを すると、 のような になります.
$ npm run gulp