6分SHAREツイートシェアはてブLINEPocketこんにちは、UXデザイナーのたぬ(@tanuhack)です!新たに1からWebサイトを作成する際、一般的に次のようなディレクトリ構造を作成しますよね。Finderでcssやimg、jsなどのフォルダを作ったり、GulpでSassやベンダープレフィックスの自動コンパイルの設定を行ったりすると、個人差あると思いますが、どうしても15〜30分はかかってしまいます。hogeのhoge部分がルートのフォルダ名になります。完成イメージイメージはつかめましたか?とりあえず、見よう見まねでプログラムを動かせるようにと書きました。注意Macユーザー向けの記事です。Windowsでも出来ますが、その際は適宜コマンドを変更して下さい。『実行』まで紹介XCodeとHomeBrewとPythonをインストールします。nodebrewnodebrewのインストールにもHomeBrewを使います。XCode→HomeBrewの順番でインストールして、nodebrewをインストールしてください。sassMacユーザーを想定しているので、Rubyのインストール手順は割愛します。(※デフォルトで入っているので)一応、自分の開発環境のバージョンも載せておきます。-vprototypeフォルダを作成するデスクトップにさまざまな雛形のファイルを保管する『prototypeフォルダ』を作成します。prototypeフォルダの中身index.htmlstyle.scss_reset.scssgulpfile.jsPythonでHTMLファイルやSCSSファイルを直接作成することは出来ませんが、予め用意したファイルのコピーであれば可能です。コピー先のディレクトリ動作を手っ取り早く確認したい方はprototypeフォルダに、以下4つのサンプルプログラムをコピーして保存してください。自分のgulpfile.jsは、上の3つの便利機能を使用しています。JSの中身を変更するのは大丈夫ですが、絶対にファイル名(gulpfile.js)は変更しないでくださいね。});});Pythonのプログラム以下、プログラムをset.pyという名前で、prototypeフォルダに保存します。new_dir_path+'assets/')プログラムの補足getpass.getuser()でユーザー名を取得。hogeのhogeを引数として取得。ちなみにsys.argv[0]だと、ファイル名のset.pyが取得できます。getpass.getuser()でユーザー名を取得。os.mkdirで空のフォルダを任意のディレクトリに新規作成。unix(subprocess).runで、UNIXコマンドを実行。するcdコマンドで、set.pyを格納しているprototypeフォルダに移動します。Desktop/prototypeデスクトップのprototypeフォルダそして、Pythonファイルを実行します。hoge上図のように、hogeという開発環境が作成されていて、ターミナルが下図のようになっていれば、GulpのSass・ベンダープレフィックス・圧縮の自動コンパイルが動いています。自動コンパイルを終了したいときはControl+Cで停めれます。gulpと入力します。SCSSフォルダ以下のディレクトリで、いかなるのSCSSファイルが保存されるたびに、style.cssとstyle.min.cssが生成/上書き保存されます(^^)さいごに今回は、GulpとPythonを使って、快適なコーディング環境(Sass・ベンダープレフィックス・圧縮等)を構築する方法を紹介しました。GulpとPythonと組み合わせることで、絶妙に手が届かなそうなところにも届くのが快感ですね。:時間短縮この記事を書いた人たぬ効率沼ブロガールーチンワークを自動化で瞬殺することに人生の楽しさを見つけた効率沼ブロガーです。本業は「データ分析」と「作業の効率化」を生業としているデータアナリスト。PythonとGASに人生救われました。当ブログは、おかげさまで月間12万PV。2020年までに30万PV目指して頑張ってます。