알겠습니다. 그래서 우리의 작업에 SourceMaps 생성을 추가하려면 Gulp-Sourcemaps를 설치해야합니다.
그리고 이제 우리의 작업을 최적화합시다 :
기본적으로 Gulp-Sourcemaps는 컴파일 된 CSS 파일에 Sourcemaps를 인라인으로 씁니다. 프로젝트 설정에 따라 별도의 파일로 작성할 수 있습니다.이 경우 Sourcemaps.write () 함수에서 gulp.dest () 대상에 대한 경로를 지정할 수 있습니다.
파티에 autoprefixer를 가져 오는 것
autopRefixer를 사용하는 이유에 대해서는 세부 사항을 다루지 않을 것입니다. 스타일 시트는 최신 데이터베이스 및 주어진 구성을 기반으로 관련 접두사를 추가합니다. 다시 말해서, 당신은 당신이 지원하려는 브라우저를 AutoPRefixer에게 알리고 스타일 시트에 관련 접두사 만 추가합니다. 제로 노력, 완벽한 지원 (이 캐치 프레이즈 특허를 상기시켜주세요).
Gulp'y 워크 플로에 autoprefixer를 포함시키기 위해서는 Sass가 그 일을 한 후에 만
Pipe 만 있으면됩니다. 그런 다음 AutoPrefixer는 스타일 시트를 업데이트하여 접두사를 추가합니다
먼저 설치하자 (지금까지 요점을 얻는다) :
그런 다음 그런 다음 작업에 추가합니다
<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>// Find all `.scss` files from the `stylesheets/` folder
</span> <span>.src(input)
</span> <span>// Run Sass on those files
</span> <span>.pipe(sass())
</span> <span>// Write the resulting CSS in the output folder
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>
지금, 우리는 autoprefixer의 기본 구성으로 실행됩니다.
시장 점유율이 1% 이상인 브라우저,
모든 브라우저의 마지막 2 버전,
Firefox esr,
<.> 오페라 12.1 <span>var sassOptions = {
</span> <span>errLogToConsole: true,
</span> <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>
우리는 다음과 같은 자체 구성을 사용할 수 있습니다
문서를 해제하십시오!
마지막으로 SASSDOC와 함께 워크 플로우 SASS 문서 생성에 추가하는 도구. SASSDOC는 JSDOC가 JavaScript : Documentation Tool에 SASS를 제공하는 것입니다. 그것은 당신의 스타일 시트를 찾는 주석 블록을 찾는다.
프로젝트가 SASSDOC를 사용하는 경우 (해야합니다!) GULP 워크 플로에서 자동 문서 생성을 추가 할 수 있습니다. Sassdoc의 멋진 것은 API가 Gulp 호환이기 때문에 Gulp에서 직접 파이프를 할 수 있다는 것입니다. 따라서 실제로 Gulp-Sassdoc 플러그인이 없습니다
프로젝트의 규모와 문서화 된 항목의 수에 따라 SASSDOC는 실행하는 데 최대 몇 초가 걸릴 수 있으므로 이를위한 별도의 작업.
$ <span>npm install gulp gulp-sass --save-dev</span>
이제 Sass 파일에 구문 오류가있을 때마다 Gulp-Sass는 오류를 기록하고 계속합니다. 작업. CSS 파일을 조정하기 위해 GULP를 사용하는 방법은 무엇입니까?
CSS 파일을 조정하려면 GULP 플러그인을 사용할 수 있습니다. gulp-clean-css. 먼저 NPM 설치 -Save Dev Gulp-Clean-CSS를 실행하여 프로젝트에 설치하십시오. 그런 다음 CSS 파일을 조정하는 작업을 생성 할 수 있습니다. var cleancss = require ( 'gulp-clean-css');
gulp.task ( 'minify-css', () => {
return gulp.src ( 'styles/*. css') .pipe (cleancss ({호환성 : 'ie8'}))))
.pipe (gulp.dest ( 'dist'));
이 작업은 스타일 디렉토리에서 모든 .css 파일을 사용하여 사용하는 것을 미수합니다. Gulp-Clean-CSS 및 Dist Directory의 결과 미니스트 CSS 파일을 출력하십시오.
